1. SVG
Scalable Vector Graphics

2. Im Vergleich zu z.B. PNG
firefox.png firefox.svg
128px × 128px ∞
21KB 46KB
21KB (gzip) 13KB (gzip)

3. Browser-Support
3.0+ 4.0+ 3.1+ 9.0+ 9.0+

4. XML-Dokument
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="400"
height="300">
<!-- ... -->
</svg>

5. Basiselemente

6. Rechtecke
<rect width="66" height="30" x="21" y="32" />

7. Kreise & Ellipsen
<circle cx="75" cy="100" r="50" />
<ellipse cx="200" cy="150" rx="150" ry="75" />

8. Pfade
<path d="M 12,10 C 39,22 43,50 9,52 C 62,114 101,145 101,145" />

9. Polygone
<path d="M 149,109 L 149,127 L 127,144 L 140,172 L 188,167 L 191,119 z" />

10. Text
Hello, out there
<text x="0" y="150" font-family="Verdana" font-size="45" fill="#c4a000">
Hello, out there
</text>

11. Styling der Elemente

12. Stroke
<circle ... stroke="red" stroke-width="5" stroke-opacity=".5" />

13. Gestrichelte Linien
<rect ... stroke="blue" stroke-width="2" stroke-dashArray="20 5 10 5" />

14. Fill
<circle ... fill="rgb(255, 0, 0)" fill-opacity=".5" />

15. Styling auch per CSS
svg rect.someClass {
stroke: #0283c5;
stroke-width: 6;
fill: none;
}

16. Transformationen

17. Verschiebung
<rect x="150" y="100" width="100" height="100" ... transform="translate(-50 -50)" />

18. Skalierung
<rect x="150" y="100" width="100" height="100" ... transform="scale(.75, 1.5)" />

19. Skalierung um das Zentrum
<!-- translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor) -->
<rect x="150" y="100" width="100" height="100"
transform="translate(50, -75) scale(.75, 1.5)" />

20. Drehung
<rect x="150" y="100" width="100" height="100" ... transform="rotate(45 200 150)" />

21. Scherung X-Achse
<rect x="150" y="100" width="100" height="100" ... transform="skewX(20)" />

22. Scherung Y-Achse
<rect x="150" y="100" width="100" height="100" ... transform="skewY(20)" />

23. Gruppierung von Elementen
<g stroke="#73d216" fill="#73d216" fill-opacity="0.4" stroke-width="3" fill="none"
<rect x="0" y="0" width="200" stroke="red" height="150" />
<ellipse cx="200" cy="150" rx="150" ry="75" />
</g>

24. Clipping
<clipPath id="clip-box">
<rect x="0" y="0" width="200" height="150" />
</clipPath>
<ellipse cx="200" cy="150" rx="150" ry="75" />

25. SVG in HTML einbinden

26. Inline im HTML verwenden
<h1>Some Heading</h1>
<div class="image">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="400" height="300"
<!-- ... -->
</svg>
</div>

27. Als externes Bild einbinden
<img class="logo" src="myImage.svg" />

28. Als CSS-Background einbinden
.logo {
display: block;
text-indent: -9999px;
width: 279px;
height: 132px;
background: url(brainbits.svg);
background-size: 279px 132px;
}

29. Fallback z.B. mit Modernizr
<img class="logo" src="myImage.svg" data-fallback="myImage.png" />
<script>
</script>
if (!Modernizr.svg) {
var image = $("img.logo");
image.attr("src", image.data('fallback'));
}

30. Viel Spass!
http://slidesha.re/W1R1Nh

31. Referenzen
Scalable Vector Graphics – Wikipedia
W3C Recommendation – SVG 1.1 2nd Edition
O'Reily SVG Essentials – Transforming the
Coordinate System
CSS-Tricks – Using SVG
© 2013 Michael van Engelshoven

32. © 2013 Michael van Engelshoven