settel/svg-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add description text

Browse Source
This commit is contained in:
Settel 2024-10-11 12:40:38 +02:00
parent 0d75370a9f
commit 54a6c71335
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
animate/index.html
View File

@ -7,7 +7,9 @@
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
</head> </head>
<body> <body>
<header> <main>
<p>If you include the SVG inline, you can access it's elements using regular
CSS styling techniques. This animation is purely done with CSS. No Javascript.</p>
<div class="sale"> <div class="sale">
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
@ -927,6 +929,8 @@
d="m 343.78989,321.72092 v 7.1022 h 37.74142 v -7.1022" d="m 343.78989,321.72092 v 7.1022 h 37.74142 v -7.1022"
id="path27464" /></g></svg> id="path27464" /></g></svg>
</div> </div>
</header> </main>
<p>If you include the SVG inline, you can access it's elements using regular
CSS styling techniques. This animation is purely done with CSS. No Javascript.</p>
</body> </body>
</html> </html>

3
include/index.html
View File

@ -8,14 +8,17 @@
</head> </head>
<body> <body>
<main> <main>
<p>Include as &lt;img&gt;</p>
<div class="girlande"> <div class="girlande">
<img src="girlande-600x100.svg" width="600" height="100" /> <img src="girlande-600x100.svg" width="600" height="100" />
</div> </div>
<p>Include as &lt;object&gt;</p>
<div class="girlande"> <div class="girlande">
<object type="image/svg+xml" data="girlande-600x100.svg"></object> <object type="image/svg+xml" data="girlande-600x100.svg"></object>
</div> </div>
<p>Include as inline</p>
<div class="girlande"> <div class="girlande">
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg

3
repeat/index.html
View File

@ -11,6 +11,9 @@
<div class="girlande girlande--600x100"></div> <div class="girlande girlande--600x100"></div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="girlande girlande--300x50"></div> <div class="girlande girlande--300x50"></div>
<p>SVG as background image with background-repeat.</p>
<p>Of course, you can do the same with PNG, JPEGs but with SVG it's
way easier to create images that fit when repeated.</p>
</header> </header>
</body> </body>
</html> </html>

1
zoom/index.html
View File

@ -9,6 +9,7 @@
<body> <body>
<header> <header>
<div class="sale"> <div class="sale">
<p>same SVG file (67kB), zoomed to different sizes without loss of quality.</p>
<img src="sale.svg" width="50" height="40" /> <img src="sale.svg" width="50" height="40" />
<img src="sale.svg" width="125" height="100" /> <img src="sale.svg" width="125" height="100" />
<img src="sale.svg" width="250" height="200" /> <img src="sale.svg" width="250" height="200" />