Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

SVG/Grafiken optimieren

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

Oft ist es schneller und einfacher, SVG-Grafiken mit einem Bildbearbeitungsprogramm wie Adobe Illustrator oder Inkscape zu erstellen und dann einzubinden. Allerdings können SVG-Grafiken genau wie Rastergrafiken unnötig groß werden. Sie können sie aber mit wenigen Schritten optimieren, so dass sie schneller vom Browser geladen werden. [1]

Bei kleineren Grafiken kann dies von Hand geschehen, im Allgemeinen empfiehlt sich jedoch der Einsatz eines Code-Optimierers.

Empfehlung:
Verwenden Sie nur optimierte SVG-Grafiken, da
  • SVG-Grafiken keine Hardware-Unterstützung durch die Grafikkarte genießen
  • der Code verständlicher wird
  • es späteres Editieren vereinfacht.

überflüssige Daten[Bearbeiten]

XML-Metadaten[Bearbeiten]

Wenn Sie eine in Inkscape erstellte Datei im Quelltext anschauen, sind die ersten 60 Zeilen weitgehend überflüssig:[2]

Beispiel
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.5 r10040"
   sodipodi:docname="Neues Dokument 1">
  <defs
     id="defs4">
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       id="perspective2985" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="350"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1018"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>

In HTML5 können Sie die XML-Dokumenttypdeklaration und die Namensräume des SVG-Elements weglassen.

Daneben finden sich XML-Metadaten sowohl für Inkscape, als auch den Vorläufer sodipodi, der seit 2004 nicht mehr weiterentwickelt wird,[3] und Metadaten im rdf-Format, die alle gelöscht werden können. Sie sind für die Anzeige von SVG-Grafiken nicht notwendig.

Beispiel
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 744 514">

Die Breite und Höhe des SVG-Elements wird hier im CSS notiert, nur der Viewport wird durch das viewBox-Attribut festgelegt.

Präsentationsattribute[Bearbeiten]

Vielen Elementen fügen die Grafik-Programme Präsentationsattribute mit Standardwerten hinzu. Da die Browser diese Werte sowieso als Default würden, können Sie sie auch löschen.

  • fill: black
  • fill-rule: nonzero
  • font-style: normal
  • font-weight: normal
  • fill-opacity: 1
  • stroke-width: 1
  • stroke-linecap: butt
  • stroke-linejoin: miter
  • stroke-miterlimit: 4
  • stroke-opacity: 1
  • stroke-dasharray: none
Empfehlung: Falls Sie Präsentationsattribute mit anderen Werten haben, die mehrfach auftreten, fassen Sie sie in Klassen zusammen. Diese können Sie dann zentral im Stylesheet definieren und verändern.

Grafik-Programme[Bearbeiten]

  • Löschen Sie unsichtbare Ebenen.
  • Vereinfachen Sie ihre Formen und symbol-Objekte.
    • Verzichten Sie auf das Einbinden von Raster-Grafiken.
    • Ersetzen Sie Formen, Pfade und Ränder durch Pfade und verbinden Sie sie.
    • Verwenden Sie so wenig wie möglich g-Elemente.
  • Verzichten Sie auf Maskierungen, indem Sie ihre Pfade anpassen und versteckte Inhalte löschen. Maskierte Inhalte werden auch dann im Code gespeichert, wenn man ihn nicht sehen kann.
  • Überprüfen Sie, ob das viewBox-Attribut mit (0,0) beginnt. Wenn nicht, können Sie in Illustrator die Einstellung:
    Objekt > Zeichenflächen > An Bildmaterialbegrenzungen anpassen

    verwenden. Oft ist es einfacher alles in ein neues Dokument zu kopieren und dann die Zeichenfläche anzupassen.

Adobe Illustrator Tricks[Bearbeiten]

Sie können in Adobe Illustrator dafür sorgen, dass Grafiken von vornherein nicht zu groß werden[4].

Empfehlung:
  • Wählen Sie eine passende Größe für ihre Zeichenfläche (Artboard). Die Grundeinstellung ist eine Din A4-Seite, die entweder zu groß ist oder mit viewBox erst passend skaliert werden muss.


Um gerade erstellte Grafiken zu vereinfachen, können Sie mit der Einstellung:

Objekt > Pfad > Vereinfachen

Pfade vereinfachen, indem sie dazwischenliegende Punkte entfernen.

Objekt > Pfad > Aufräumen

hilft Ihnen, ungenutzte Ebenen, etc. zu entfernen.*[5]

Inkscape Tricks[Bearbeiten]

Code-Optimierer[Bearbeiten]

Mittlerweile gibt es mehrere Möglichkeiten, durch Grafik-Programme erstellte SVG-Grafiken nachträglich zu optimieren.

SVG-Optimizer[Bearbeiten]

Der älteste und bekannteste ist der SVG-Optimizer von Peter Collingridge[6]. Mit ihm können Sie SVG-Grafiken online hochladen und dann mehrere Optionen auswählen.

Am sinnvollsten ist die Entfernung der Namespace-Deklarationen und Reduzierung der Dezimalstellen bei Attributen und Stildeklarationen. Leere Elemente und Gruppierungen werden entfernt, sowie Pfade zusammengefasst.

Beachten Sie: Wenn Sie die ids entfernen, werden auch keine Verläufe mehr geladen.

SVGOMG[Bearbeiten]

Der SVGOMG von Jake Archibald funktioniert ebenfalls online und hat noch mehr Einstellungen wie z.B. das Reduzieren von Farben und Entfernen überflüssiger stroke- und fill-Eigenschaften. [7]

Sie können SVGOMG auch speichern und offline verwenden. [8]

SVGO - inline[Bearbeiten]

SVGO ist ein node-basiertes Kommandozeilenwerkzeug, mit dem Sie ebenfalls SVG-Grafiken aufräumen können. [9] [10]

SVG-Cleaner[Bearbeiten]

Weblinks[Bearbeiten]

  1. CSS-Tricks.com Understanding and Manually Improving SVG Optimization von Raymond Schwarz 18.05.2015
  2. http://demosthenes.info/blog/807/SVG-Optimisation-The-Basics
  3. http://de.wikipedia.org/wiki/Sodipodi
  4. http://demosthenes.info/blog/821/Adobe-Illustrator-Workflow-For-SVG-Production
  5. Kulturbanause.de -SVG-Grafiken erstellen und einbinden sehr anschaulicher Artkel mit vielen Screenshots
  6. SVG-Optimizer von Peter Collingridge
  7. SVGOMG von Jake Archibald
  8. Useful SVGO(ptimization) Tools von Sara Soueidan 26.01.2015
  9. design-weekly.com Optimizing SVG for the Web von Dennis Gaebel 22.10.2014
  10. How to optimize SVG von Jayden Seric 20.07.2014