It’s #FrontendFriday – How to SVG
Mit SVG ist nicht die Straßenverkehrsgenossenschaft gemeint, sondern Scalable Vector Graphics. Im Folgenden wollen wir einen kurzen Überblick über SVGs geben und wie man diese im Projektalltag richtig einsetzt.
Was ist ein SVG?
SVGs sind auf XML basierende, skalierbare Vektorgrafiken, welche erstmals 2001 von W3C (World Wide Web Consortium) veröffentlicht wurden. Der große Vorteil von SVGs ist, dass ein SVG nicht auf Pixeln basiert sondern auf Verktoren. Dadurch können diese beliebig vergrößert werden, ohne dass die Bildqualität darunter leidet. [1]
Die Grundstruktur eines SVGs ist immer folgende:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="800mm" height="600mm"> <path></path> </svg>
Der Inhalt des Pfads (<path></path>) definiert die eigentliche Form der Grafik. Einfache Formen können leicht implementiert und dargestellt werden.
Beispiel Kreis [2]:
<circle cx="100" cy="100" r="50" />
Beispiel Rechteck [2]:
<rect x="100" y="100" width="100" height="200" />
Wie verwende ich SVGs in einer Applikation?
Es gibt verschiedene Arten SVGs in eine Applikation einzubinden.
SVGs im img-TAG:
Diese Vorgehensweise ermöglicht eine zentrale Verwaltung von SVGs in einem separaten Verzeichnis (beispielsweise „/assets/icons“). Anschließend können einzelne Files mit Hilfe von img-TAGs eingebunden werden:
<img src=„/assets/icons/edit-icon.svg“ alt=”Edit-SVG” width=”20” height=“20”>
Durch das img-TAG können SVGs sehr schnell und einfach implementiert werden. Zudem wird die Verwaltung von SVGs erleichtert. Der Nachteil hierbei ist, dass einige Funktionen wie Animationen und Links nicht auf das SVG angewendet werden können. [3]
SVGs als SVG-TAG:
Eine weitere Möglichkeit ist, das SVG direkt im HTML-Code zu implementieren. Dadurch können CSS-Klassen direkt angewendet werden. Somit kann die Grafik umfangreich angepasst werden. Zudem sind in dieser Variation Verlinkungen und Animationen möglich. Allerdings leiden darunter die Lesbarkeit und Wartbarkeit des HTML-Codes deutlich. [3]
<body>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title></title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Tabelle-Antraege" transform="translate(-1086.000000, -66.000000)">
<g id="Group-3" transform="translate(1086.500000, 66.577278)">
<path d="M16.734375,1.05263158 L12.21875,1.05263158 L11.804375,0.231578947 C11.7249796,0.0949105953 11.5808532,0.0076514 11.421875,0 L5.578125,0 C5.41914678,0.0076514 5.27502037,0.0949105953 5.195625,0.231578947 L4.78125,1.05263158 L0.265625,1.05263158 C0.118924363,1.05263158 0,1.17045138 0,1.31578947 L0,2.18254092 C0,2.32787901 0.118924363,2.44569882 0.265625,2.44569882 L16.734375,2.44569882 C16.8810756,2.44569882 17,2.32787901 17,2.18254092 L17,1.31578947 C17,1.17045138 16.8810756,1.05263158 16.734375,1.05263158 Z" id="Path" fill="#303030" fill-rule="nonzero"></path>
<path d="M9.99510367,10.0279854 L11.4477931,8.58878848 C11.4990493,8.54113041 11.528125,8.47459079 11.528125,8.40494946 C11.528125,8.33530814 11.4990493,8.26876852 11.4477931,8.22111044 L10.3238144,7.10757122 C10.2757095,7.05679109 10.2085461,7.02798539 10.1382519,7.02798539 C10.0679577,7.02798539 10.0007943,7.05679109 9.95268938,7.10757122 L8.5,8.54676813 L7.04731062,7.10757122 C6.99920575,7.05679109 6.93204232,7.02798539 6.8617481,7.02798539 C6.79145389,7.02798539 6.72429046,7.05679109 6.67618559,7.10757122 L5.55220694,8.22111044 C5.50095075,8.26876852 5.471875,8.33530814 5.471875,8.40494946 C5.471875,8.47459079 5.50095075,8.54113041 5.55220694,8.58878848 L7.00489633,10.0279854 L5.55220694,11.4671823 C5.50095075,11.5148404 5.471875,11.58138 5.471875,11.6510213 C5.471875,11.7206627 5.50095075,11.7872023 5.55220694,11.8348604 L6.67618559,12.9483996 C6.72429046,12.9991797 6.79145389,13.0279854 6.8617481,13.0279854 C6.93204232,13.0279854 6.99920575,12.9991797 7.04731062,12.9483996 L8.5,11.5092027 L9.95268938,12.9483996 C10.0007943,12.9991797 10.0679577,13.0279854 10.1382519,13.0279854 C10.2085461,13.0279854 10.2757095,12.9991797 10.3238144,12.9483996 L11.4477931,11.8348604 C11.4990493,11.7872023 11.528125,11.7206627 11.528125,11.6510213 C11.528125,11.58138 11.4990493,11.5148404 11.4477931,11.4671823 L9.99510367,10.0279854 Z" id="Path" fill="#303030"></path>
<path d="M15.3578522,4.04772229 L14.1299382,16.4722723 L3.28369261,16.7977223 L1.27421134,4.47343724 L15.3578522,4.04772229 Z" id="Rectangle" stroke="#303030" stroke-width="1.25"></path>
</g>
</g>
</g>
</svg>
</body>
SVG über Bibliotheken
Eine weitere Variante ist der Einsatz von Libraries wie beispielweise „angular-svg-icon“. Diese vereint die Vorteile von den beiden vorhergegangenen Möglichkeiten. Icons und Bilder können zentral verwaltet und leicht eingebunden werden. Zudem können sie durch den Einsatz von CSS-Klassen unterschiedlich verändert werden. Allerdings muss hier eine zusätzliche Library installiert werden. [4]
<svg-icon src="/assets/icons/svg/edit.svg" [class]="'c-icon c-icon--edit'"></svg-icon>
.c-icon {
display: inline-block;
width: rem(16);
height: rem(16);
svg {
width: 100%;
height: 100%;
}
&--edit {
cursor: pointer;
}
}
Es gibt noch viele weitere Möglichkeiten ein SVG einzubinden, wie beispielsweise als Hintergrund oder als Objekt. Die vorgestellten Methoden geben jedoch einen grundlegenden Überblick für die Verwendung von SVGs in einer Applikation.
Die Webfrontend-AG wünscht allen ein schönes Wochenende!
Mehr zu Java Programmierung erfahren
Quellen:
[1] W3C [2] GlossarWiki Augsburg [3] Mediaevent [4] Angular-svg-icon