Page Comparison

...

Damit beim Einsatz von SVG-Dateien alle Vorteile des Formats – wie z. B. die stufenlose Skalierung ohne Qualitätsverlust unabhängig von der Zeichengröße – zum Tragen kommen, müssen die Dateien bestimmte Rahmenbedingen erfüllen. Außerdem gibt es noch spezielle Anforderungen, da die SVG-Dateien direkt inline im HTML-Code der Seite eingebettet werden.

Das SVG muss vektorbasiert sein.
Das SVG darf keine eingebetteten Grafiken (meist in Form von base64-encodierten JPG oder PNG Daten) enthalten.
Das SVG darf keine verlinkten Grafiken enthalten.
Das SVG darf keinen <style> CSS Block enthalten.
Das SVG darf keine id oder class Attribute enthalten; Falls id Attribute nicht vermieden werden können, dann sollten es zumindest möglichst eindeutige sein (UUIDs).

Bei SVG-Dateien handelt es sich um reguläre XML-Dateien, die mit nahezu jedem beliebigen Editor – wie z. B. Visual Studio Code oder Windows Notepad/Editor – ganz einfach gelesen werden können. Ein vektorbasiertes XML sieht beispielsweise folgendermaßen aus:

Code Block

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 212.6 42.5" style="enable-background:new 0 0 212.6 42.5;" xml:space="preserve">
<g>
	<g>
		<path style="fill:#C90130;" d="M53.8,12.3h3.4v18h-3.4V12.3z"/>
		<path style="fill:#C90130;" d="M69.4,23.9c0,5.3-2.9,6.6-4.9,6.6c-3,0-4.9-2.4-4.9-6.5c0-4.6,2.4-6.6,4.9-6.6C67.6,17.4,69.4,19.9,69.4,23.9
			z M63.1,23.9c0,2.2,0.3,4,1.6,4c1.1,0,1.4-2.1,1.4-4c0-1.7-0.3-4-1.4-4C63.4,20,63.1,22.2,63.1,23.9z"/>
		<path style="fill:#C90130;" d="M75.3,23.2L75.3,23.2c0.3-0.7,0.5-1.2,0.7-1.8l1.6-3.8h3.7l-3.1,5.3l3.2,7.4h-3.8l-1.8-5.2l-0.6,1.1v4.1h-3.4
			v-18h3.4L75.3,23.2L75.3,23.2z"/>
...
	</g>
</g>
</svg>

Note
SVGs mit eingebetteten Grafiken lassen sich nicht verlustfrei in der Größe skalieren und darüber hinaus verbrauchen eingebettete Grafiken im Normalfall deutlich mehr Speicherplatz als reine Vektorinformationen.

...

Code Block

<image style="overflow:visible;" width="156" height="165" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEN2Q3ZAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
EAMCAwYAAAREAAAGJQAACF3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAMUAxQMBIgACEQEDEQH/
xACtAAEAAQUBAAAAAAAAAAAAAAAAAQIDBAYHBQEBAAMBAQAAAAAAAAAAAAAAAAIDBQEEEAABAwID
CAICAgMAAAAAAAAAAQIDEQUQIDUwMRIyBBUGFjMUQBNQIWAlBxEAAQIEBQMCBQUBAAAAAAAAAwEC
AJKycyBAMdIEEZM0MDUhURKzZBBwcSKCdBIAAQMEAgIBBQAAAAAAAAAAAQAxAhAwkXIyMxEhUCBB
EiKC/9oADAMBAAIRAxEAAADoAGubHpUfTQ8JVqe68Ie68Ie68Ie68Ie68Ie68Ie68Ie68IbJuPNe
lWZ4T8QDSt10qHr18VbIAAAkBwABEw7l9K5r0qzLCzPAaVuulQ9evirZAAEgOEW3LqxU5dRKQGV0
rmvSrMwLM8BpW66VD16+KtkASA4ojGRuWrMd5kXcbJ4vzEpCHcvpXNelWZgWZ4DSt10qHr18VbJI
BxajERmxTShVNNwvZdrJTkJIHcvpXNelWZYWZ4DSt10qHr1+SrZEOTYjDRmxFKmUVI1ZNrNXXLgm
ISAy+lc16VZlhZngNK3XSoevwCKthjxhoTZilSRPa5uU5XLrmZRcWglAdAy+lc16VZlhZngNK3XS
...

Enthält ein SVG verlinkte Grafiken, sind in der Datei Blöcke zu finden, die beispielsweise folgendermaßen aussehen:

Code Block
<image style="overflow:visible;enable-background:new;" xlink:href="logo.png">

Note
Enthält ein SVG eingebette `<style>` CSS-Blöcke kann dies zu Nebeneffekten führen, falls mehrere SVGs auf der Seite eingebunden sind (das ist der Regelfall). Adobe Illustrator exportiert standardmäßig CSS-Blöcke mit den Klassennamen `.st[0-9]`, was darin resultiert, dass das letzte eingebunden SVG der Seite bestimmt, wie die Klasse definiert ist.

...

Um ein möglichst brauchbares SVG aus Adobe Illustrator zu exportieren, empfiehlt es sich folgende Einstellungen zu beachten.

Datei → Exportiereren Exportieren → Exportieren als…
Dateityp: SVG (*.SVG) und Option Zeichenflächen verwenden
- deaktivieren, wenn nur das Objekt selbst ohne Rand exportiert werden soll. Das ist üblicherweise die gewünschte Einstellung.
- aktivieren, wenn die Zeichenfläche gewünscht ist, z. B. um einen Abstand um das eigentliche Element zu haben.
Stil: Inline-Format
Schrift: SVG
Bilder: Beibehalten
Objekt-IDs: MinimalEindeutig (erstellt UUIDs)
Dezimalstellen: 2
Minifizieren: AN
Responsiv: AN

...

^{Empfohlene SVG-Optionen für den Export aus Adobe Illustrator}

Optimierung von SVG-Dateien

...

Im Normalfall ist eine weitere Optimierung von SVG-Dateien nicht nötig, da sich diese aufgrund ihrer textbasierten Natur sehr gut komprimieren lassen (nginx gzip compression).

Note
ACHTUNG: Wenn ein SVG mit SVGOMG optimiert werden soll, muss die Option Clean IDs deaktiviert sein, sonst macht SVGOMG aus den UUIDs wieder a, b, c, … was bei mehreren SVGs pro Seite wieder zu Konflikten führt!

Responsive SVG-Dateien

Im Zusammenhang mit responsiven SVG-Dateien ist darauf hinzuweisen, dass eine verlustfreie Skalierung nicht automatisch zu einer guten Lesbarkeit des entsprechenden Motivs führt. Mittels Media-Queries kann ein SVG selbst responsiv bzw. adaptiv werden.

...

Versions Compared

Old Version 4

New Version 5

Key

Optimierung von SVG-Dateien

Responsive SVG-Dateien