SVG Basics

SVG – Regeln und Erkenntnisse

Illustrator Export Einstellungen

• Stil: Interne CSS oder Präsentationsattribute (siehe unten)
• Schrift: In Konturen umwandeln > Sollte schon in Illustrator gemacht werden, da viele Elemente nicht sauber zusammengefasst werden und daruch unnötig viele Einzelelemente entstehen. 
• Objekt-IDs: Ebenennamen (wenn CSS-Zugriff geplant), Minimal (wenn nicht)
• Dezimalstellen: 2
• Responsiv: IMMER AUS > Entfernt Width + Height im svg-Tag

Width, Height und viewBox

Im SVG Tag werden neben anderen Information auch width, height und vievBox ausgegeben. Um ein svg als img im HTML-Tag einzubinden ist width und height zwingend erforderlich, da die svg-Datei sonst nicht angzeigt wird. Illustrator lässt width und height aber weg, wenn man die Option Responsive anwählt, was irreführend ist. Generell kann man sagen, dass man widht und height immer ausgeben soll, da die Grösse via css überschrieben werden kann. Gibt man die svg-Datei direkt im HTML-Code aus könnte man drauf verzichten, aber es schadet auch nicht, da auch in diesem Fall die Grösse via CSS angepasst werden kann. Eine width: 100% ist in jedem Fall responsive, ob inline SVG oder als Bild.

• viewBox = internes Boxmodel. In diesem «Container» befindet sich der gesamte Inhalt. Er ist quasi das Koordinatensystem. Die Positionen der im SVG enthaltenen Elemente basieren auf dieser Box. Z.B. viewBox="0 0 40 40". 
• Width="100", Height="60": Darstellungsgrösse auf dem Bildschirm. Diese Grössenangabe kann natürlich per CSS Responive werden durch: width: 100%, oder fixe Grösse width: 3.5rem, usw.

 .svg-icon {
   width: 100%;
   height: auto;
   display: block;
 }

Was ist die viewBox

• viewBox="0 0 40 40" bedeutet: Zeichenbereich von Punkt 0,0 bis 40,40
• Ohne viewBox: Skalierung per CSS funktioniert nicht korrekt
• Mit viewBox: Inhalt skaliert immer proportional mit, egal wie gross der Rahmen ist
• viewBox ist zwingend, da sich ohne viewBox der Inhalt nicht skalieren liesse

Arbeitsgrösse in Illustrator

• Im Prinzip spielt es keine Rolle, wie gross Grafiken in Illustrator erstellt werden. Es ist aber sinnvoll sich an eine mögliche Endgrösse anzupassen, damit ein svg mit einer viewBox von z.B.1000x1000 nicht den ganzen Bildschirm ausfüllt, wenn kein CSS geladen ist. Für Icons von z.B. 40x40 px macht aber auch eine doppelte Grösse durchaus Sinn. Infografiken oder grössere SVG Grafiken in einer sinnvollen Grösse von 600, 800 oder 1000 px zu erstellen.

Interne CSS vs Präsentationsattribute

Beim Export sollte Präsentationsattribute gewählt werden. Damit werden die Werte direkt im Element und nicht in einer internen CSS-Deklaration ausgegeben. Dies ist vorzuziehen, da das interne CSS vom externen CSS mit einer höheren Spezifität oder !Important überschrieben werden muss.

Interne CSS (Illustrator-Standard): (nicht empfohlen)

 <style>.cls-1 { fill: #fff; }</style>

•  Klassen wie .cls-1, .cls-2
   → CSS-Überschreibung braucht !important oder höhere Spezifität

Präsentationsattribute:

 <rect fill="#ff8904"/>

• fill direkt am Element
• CSS überschreibt ohne !important (CSS schlägt Präsentationsattribute)
• Besser wenn CSS-Hover oder Styling geplant ist

Ebenennamen und Id’s

Um eine saubere SVG Datei zu erstellen ist es sinnvoll, die Ebenen in Illustrator sauber zu benennen und zusammengehörende Elemente zu gruppieren. Die Gruppen- und Ebenenbezeichnungen werden beim Export im SVG als id den Elementen mitgegeben und können so per CSS angepasst werden.

• Ebenennamen in Illustrator vergeben → werden zu IDs im SVG
• Ermöglicht gezieltes CSS-Ansprechen einzelner Elemente

• Beispiel Ebenenstruktur für Badges:

  

  <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
    <g id="container">
      <g id="badge-local">
        <rect id="bg" width="40" height="40" rx="5" ry="5" fill="#ff8904"/>
        <polygon id="letter" points="19.69 22.02 19.69 2.33 13.86 2.33 13.86 26.5 17.62 26.5 19.69 26.5 29.83 26.5 29.83 22.02 19.69 22.02"/>
        <g id="text">
          <path d="M7.54,36.65v-6.34h-.94v7.11h4.31v-.77h-3.37Z"/>
          ...
          <path d="M32.52,36.65v-6.34h-.94v7.11h4.31v-.77h-3.37Z"/>
        </g>
      </g>
    </g>
  </svg>

Export bei Objekt-IDs:

• Ebenennamen: mein Default
  Hier werden die Ebenennamen als IDs exportiert (siehe Beispiel oben)
• Minimal: nicht empfohlen
  AI generiert kurze Auto-IDs (a, b, c) – Ebenennamen gehen verloren
• Eindeutig: brauch ich auch nicht.

Path vs Polygon

• path: für Formen mit Kurven (Bézierkurven)
• polygon: für Formen mit nur geraden Linien
• Illustrator gibt gerade Formen oft trotzdem als path aus – bekannte Schwäche
• Im SVG-Code funktionieren beide gleich, polygon ist etwas kürzer/lesbarer

SVG als <img> vs. Inline in HTML

SVG img im HTML

• Braucht zwingend width + height im SVG (sonst 0px / unsichtbar)
• Kein CSS-Zugriff auf SVG-Inhalte (fill, path etc.)
• Für Hover nur: opacity, filter, transform auf dem <img>-Element selbst

Inline SVG direkt im HTML

• width + height trotzdem behalten (Fallback), per CSS überschreibbar
• Voller CSS-Zugriff auf alle Elemente (rect, path, polygon, per ID)
• Für Hover auf einzelne Farben/Formen möglich

SVG Optimierer

(jakearchibald.github.io/svgomg)

Sichere Einstellungen:

• Precision: 1
• Multipass: an
• Remove viewBox: AUS
• Remove width/height: AUS
• Merge paths: AUS (macht Outlines kaputt!)
• Cleanup IDs: an
• Convert straight curves to lines: an (sicher, wandelt gerade Béziersegmente in Linien)

Fazit: Bei sauberem Illustrator-Export eigentlich nicht nötig.
Grösste Gefahr: «Merge paths» und aggressive Path-Simplification zerstören Kurven.

Diverses

In der SVG Datei

• <?xml version="1.0" encoding="UTF-8"?> ist für Web nicht nötig, kann manuell gelöscht werden
• data-name="..." wird von Illustrator bei "Minimal" automatisch ergänzt – oft länger als eine ID

In Illustrator

• Outline erstellen: Object → Path → Simplify reduziert Ankerpunkte. Eher nicht empfohlen, da dies die Pfade oft zerstört und schöne Rundungen zerdellt
• Zusammengesetzte Formen (z.B. A): Pathfinder → Vereinen manuell anwenden, besonders bei Umwandlung von Text zu Outline entstehen hier in Illustrator oft überflüssig überlappende Formen die gut mit Pathfinder zu einer Form vereinigt werden können
• Masterdatei mit Originaltexten behalten, separate Export-Kopie für Outlines