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 ac6100773e
5 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
animate/index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
</head> </head>
<body> <body>
<header> <main>
<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 +927,9 @@
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>
<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>
</main>
</body> </body>
</html> </html>

9
border/index.html
View File

@ -7,7 +7,8 @@
<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>regular box with <code>border: 1px solid black;</code></p>
<div class="box"> <div class="box">
<div class="icon"> <div class="icon">
<img src="sale.svg" width="100" height="80" /> <img src="sale.svg" width="100" height="80" />
@ -21,6 +22,8 @@
dolore magna aliquyam erat, sed diam voluptua. dolore magna aliquyam erat, sed diam voluptua.
</div> </div>
</div> </div>
<p>same box but styled with <code>boder-image</code>. Of course, you can use PNG or even JPEG
to achieve the same but SVG keep their high quality, no matter how small or large the box is.</p>
<div class="box box--wobbly-border"> <div class="box box--wobbly-border">
<div class="icon"> <div class="icon">
<img src="sale.svg" width="100" height="80" /> <img src="sale.svg" width="100" height="80" />
@ -34,7 +37,9 @@
dolore magna aliquyam erat, sed diam voluptua. dolore magna aliquyam erat, sed diam voluptua.
</div> </div>
</div> </div>
<p>for reference, here's the original SVG used for styling:</p>
<img src="box.svg" /> <img src="box.svg" />
</header> </main>
</body> </body>
</html> </html>

9
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

5
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" />