Svg Basics
0 likes579 views
SVG is a XML-based vector image format that can be scaled to any size without loss of quality. It supports basic shapes like rectangles, circles, ellipses and paths, as well as text. Elements can be styled through properties like fill, stroke, opacity and transformations like translate, scale, rotate and skew. SVG images can be embedded inline in HTML, used as an <img> tag or as a CSS background. Browser support for SVG is good across modern browsers.
Svg Basics
- 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>
- 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>
- 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')); }
- 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