diff --git a/animate/index.html b/animate/index.html index 8584428..45701d6 100644 --- a/animate/index.html +++ b/animate/index.html @@ -7,7 +7,7 @@ -
+
-
+ +

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.

+ \ No newline at end of file diff --git a/border/index.html b/border/index.html index 2fc9321..fd0b88f 100644 --- a/border/index.html +++ b/border/index.html @@ -7,7 +7,8 @@ -
+
+

regular box with border: 1px solid black;

@@ -21,6 +22,8 @@ dolore magna aliquyam erat, sed diam voluptua.
+

same box but styled with boder-image. 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.

@@ -34,7 +37,9 @@ dolore magna aliquyam erat, sed diam voluptua.
+ +

for reference, here's the original SVG used for styling:

-
+ \ No newline at end of file diff --git a/include/index.html b/include/index.html index d918679..73d18d9 100644 --- a/include/index.html +++ b/include/index.html @@ -8,14 +8,17 @@
+

Include as <img>

- -
- + + + +

Include as <object>

+

Include as inline

+

SVG as background image with background-repeat.

+

Of course, you can do the same with PNG, JPEGs but with SVG it's + way easier to create images that fit when repeated.

- \ No newline at end of file + diff --git a/zoom/index.html b/zoom/index.html index 49406dd..61a21ac 100644 --- a/zoom/index.html +++ b/zoom/index.html @@ -9,6 +9,7 @@
+

same SVG file (67kB), zoomed to different sizes without loss of quality.