SVG

Wie erstellen wir ein SVG?

mit Illustrator, Inkscape, oder einfach nur mit Code!

Illustrator Beispiele

Schritt 1.1

normales Icon als Vector (Path)

Schritt 1.2

Farbe und Größe sind nicht relevant

Schritt 2

jedes Element kann man als separates/unabhänginges Form speichern

Schritt 3

so:

Schritt 4

eine Zeichenfläche erstellen

Schritt 5

als SVG speichern (Zeichenflächen verwenden)

Schritt 6

SVG-Optionen wählen

Schritt 7

in unserem Ordner speichern

Schritt 8

und voilà!

Einbindung

img-Tag

<img src="blume.svg" alt="Blume in Rahme">

background-image

HTML + CSS

<img style="background-image" ;="" src="blume.svg">
              <div id="blumesvg"></div>

#blumesvg {
  width: 300px;
  height: 300px;
  background: url(../blume.svg);
  background-size: contain;
}

Object-Tag

<object data="blume.svg" type="image/svg+xml">
  Fallback
</object>

SVG

in HTML-Code ("inline")

• SVGs können via CSS gestyled werden

• auch die einzelnen Elemente innerhalb eines SVG

Filtern mit CSS Beispiel

Inline SVG

SVG circle

...
    <svg width="200" height="200">
      <circle id="outer" cx="100" cy="100" r="100" fill="white"></circle>
      <circle id="inner" cx="100" cy="100" r="50" fill="black"></circle>
    </svg>
...

Filter Palette

• feBlend - filter for combining images
• feColorMatrix - filter for color transforms
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - filter for drop shadows
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - filter for lighting
• fePointLight - filter for lighting
• feSpotLight - filter for lighting

feGaussianBlur

<svg width="200" height="200">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5.5">
    </feGaussianBlur></filter>
  </defs>
...
</svg>

Animationen

Möglichkeiten

• animate
• set
• animateMotion
• animateColor
• animateTransform

Animation mit Events

z.B. bei "click" oder "hover"

<svg width="500" height="250">
  <g transform="translate( 250,125)">
    <rect x="-75" y="-75" width="150" height="150" fill="ivory">
      <animateTransform repeatCount="indefinite" attributeName="transform" type="rotate" from="0" to="90" begin="0" dur="5s">
    </animateTransform></rect>
  </g>
</svg>

AnimateMotion

Anwendungsbereiche

• Karten, Stadtpläne, Geokarten und Wetterkarten

• Icons (Sprite: zusammen mit .PNG als Ersatz)

• Responsive Logos/Icons

und...

• Animmierte Webseiten (ohne Flash/JavaScript)

• Musik Player

• interaktive Infografik/Diagramme

• usw.