SVG
Scalable Vector Graphics
Im Vergleich zu z.B. PNG
firefox.png firefox.svg
128px × 128px ∞
21KB 46KB
21KB (gzip) 13KB (gzip)
Browser-Support
3.0+ 4.0+ 3.1+ 9.0+ 9.0+
XML-Dokument
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.0"
...
Basiselemente
Rechtecke
<rect width="66" height="30" x="21" y="32" />
Kreise & Ellipsen
<circle cx="75" cy="100" r="50" />
<ellipse cx="200" cy="150" rx="150" ry="75" />
Pfade
<path d="M 12,10 C 39,22 43,50 9,52 C 62,114 101,145 101,145" />
Polygone
<path d="M 149,109 L 149,127 L 127,144 L 140,172 L 188,167 L 191,119 z" />
Text
Hello, out there
<text x="0" y="150" font-family="Verdana" font-size="45" fill="#c4a000">
Hello, out there
</text>
Styling der Elemente
Stroke
<circle ... stroke="red" stroke-width="5" stroke-opacity=".5" />
Gestrichelte Linien
<rect ... stroke="blue" stroke-width="2" stroke-dashArray="20 5 10 5" />
Fill
<circle ... fill="rgb(255, 0, 0)" fill-opacity=".5" />
Styling auch per CSS
svg rect.someClass {
stroke: #0283c5;
stroke-width: 6;
fill: none;
}
Transformationen
Verschiebung
<rect x="150" y="100" width="100" height="100" ... transform="translate(-50 -50)" />
Skalierung
<rect x="150" y="100" width="100" height="100" ... transform="scale(.75, 1.5)" />
Skalierung um das Zentrum
<!-- translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor) -->
<rect x="150" y="100"...
Drehung
<rect x="150" y="100" width="100" height="100" ... transform="rotate(45 200 150)" />
Scherung X-Achse
<rect x="150" y="100" width="100" height="100" ... transform="skewX(20)" />
Scherung Y-Achse
<rect x="150" y="100" width="100" height="100" ... transform="skewY(20)" />
Gruppierung von Elementen
<g stroke="#73d216" fill="#73d216" fill-opacity="0.4" stroke-width="3" fill="none"
<rect x="0" y...
Clipping
<clipPath id="clip-box">
<rect x="0" y="0" width="200" height="150" />
</clipPath>
<ellipse cx="200" cy="150" rx=...
SVG in HTML einbinden
Inline im HTML verwenden
<h1>Some Heading</h1>
<div class="image">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" w...
Als externes Bild einbinden
<img class="logo" src="myImage.svg" />
Als CSS-Background einbinden
.logo {
display: block;
text-indent: -9999px;
width: 279px;
height: 132px;
background: url(br...
Fallback z.B. mit Modernizr
<img class="logo" src="myImage.svg" data-fallback="myImage.png" />
<script>
</script>
if (!Mod...
Viel Spass!
http://slidesha.re/W1R1Nh
Referenzen
Scalable Vector Graphics – Wikipedia
W3C Recommendation – SVG 1.1 2nd Edition
O'Reily SVG Essentials – Transfor...
© 2013 Michael van Engelshoven
Upcoming SlideShare
Loading in...5
×

Svg Basics

240

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
240
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Svg Basics

  1. 1. SVG Scalable Vector Graphics
  2. 2. Im Vergleich zu z.B. PNG firefox.png firefox.svg 128px × 128px ∞ 21KB 46KB 21KB (gzip) 13KB (gzip)
  3. 3. Browser-Support 3.0+ 4.0+ 3.1+ 9.0+ 9.0+
  4. 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. 5. Basiselemente
  6. 6. Rechtecke <rect width="66" height="30" x="21" y="32" />
  7. 7. Kreise & Ellipsen <circle cx="75" cy="100" r="50" /> <ellipse cx="200" cy="150" rx="150" ry="75" />
  8. 8. Pfade <path d="M 12,10 C 39,22 43,50 9,52 C 62,114 101,145 101,145" />
  9. 9. Polygone <path d="M 149,109 L 149,127 L 127,144 L 140,172 L 188,167 L 191,119 z" />
  10. 10. Text Hello, out there <text x="0" y="150" font-family="Verdana" font-size="45" fill="#c4a000"> Hello, out there </text>
  11. 11. Styling der Elemente
  12. 12. Stroke <circle ... stroke="red" stroke-width="5" stroke-opacity=".5" />
  13. 13. Gestrichelte Linien <rect ... stroke="blue" stroke-width="2" stroke-dashArray="20 5 10 5" />
  14. 14. Fill <circle ... fill="rgb(255, 0, 0)" fill-opacity=".5" />
  15. 15. Styling auch per CSS svg rect.someClass { stroke: #0283c5; stroke-width: 6; fill: none; }
  16. 16. Transformationen
  17. 17. Verschiebung <rect x="150" y="100" width="100" height="100" ... transform="translate(-50 -50)" />
  18. 18. Skalierung <rect x="150" y="100" width="100" height="100" ... transform="scale(.75, 1.5)" />
  19. 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. 20. Drehung <rect x="150" y="100" width="100" height="100" ... transform="rotate(45 200 150)" />
  21. 21. Scherung X-Achse <rect x="150" y="100" width="100" height="100" ... transform="skewX(20)" />
  22. 22. Scherung Y-Achse <rect x="150" y="100" width="100" height="100" ... transform="skewY(20)" />
  23. 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. 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. 25. SVG in HTML einbinden
  26. 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. 27. Als externes Bild einbinden <img class="logo" src="myImage.svg" />
  28. 28. Als CSS-Background einbinden .logo { display: block; text-indent: -9999px; width: 279px; height: 132px; background: url(brainbits.svg); background-size: 279px 132px; }
  29. 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. 30. Viel Spass! http://slidesha.re/W1R1Nh
  31. 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. 32. © 2013 Michael van Engelshoven
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×