SVGScalable Vector Graphics

Im Vergleich zu z.B. PNG

firefox.png firefox.svg128px × 128px ∞

21KB 46KB21KB (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" width="400" height="300"> <!-- ... --> </svg>

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 CSSsvg 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" width="100" height="100" transform="translate(50, -75) scale(.75, 1.5)" />

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="0" width="200" stroke="red" height="150" /> <ellipse cx="200" cy="150" rx="150" ry="75" /></g>

Clipping

<clipPath id="clip-box"> <rect x="0" y="0" width="200" height="150" /></clipPath>

<ellipse cx="200" cy="150" rx="150" ry="75" />

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" width="400" height="300"

<!-- ... -->

</svg></div>

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(brainbits.svg); background-size: 279px 132px;}

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')); }

Viel Spass!

http://slidesha.re/W1R1Nh

ReferenzenScalable Vector Graphics – WikipediaW3C Recommendation – SVG 1.1 2nd EditionO'Reily SVG Essentials – Transforming theCoordinate SystemCSS-Tricks – Using SVG

© 2013 Michael van Engelshoven

© 2013 Michael van Engelshoven