D'Virdeeler vum Verwenden Skalierend Vektor Grafiken
Scalable Vector Graphics, oder SVG, spillt eng wichteg Roll am Internetdesign haut. Wann Dir de SVG net momentan benotzt fir Är Webdesign ze maachen, da sidd Dir e puer Ursaachen, firwat Dir et unzefänken sollt och e Fallbacks benotzen fir méi al Browser ze benotzen déi dës Fichier net ënnerstëtzen.
Resolutioun
De gréissten Virdeel vum SVG ass d'Resolutioun vun Onofhängegkeet. Well SVG-Biller sinn Vecte grafiken anstatt Pixel-baséiert Rasterbilder, kënne se mat der Gréisst vun der Bildqualitéit verännert ginn. Dëst ass besonnesch wichteg wann Dir reagéiert Websäiten kreéiert déi Gutt ugemellt sinn a gutt schaffen an e ganze Spektrum vun Screenshots an Apparater .
SVG-Fichier kënnen eropgeleet ginn oder ënnerholl ginn fir d'Änneregréisst an den Layoutbedarf vun Ärem reagéiert Websäit z'ergräifen an Dir braucht keng Gedanken iwwert dës Grafiken déi bestroft Qualitéit kee Schrëtt gemaach hunn.
Dateigréisst
Ee vun den Erausfuerderen mat Rasterbilder (JPG, PNG, GIF) op reaktiouns Websiten ass d'Dateigréisst vun deenen Biller. Well Rasterbiller keng Skala sinn wéi déi Vektori'en maachen, musst Dir Är Pixel-baséiert Biller op déi gréisst Gréisst leeën, wou se se ugewise ginn. Dëst ass well Dir kënnt ëmmer e Bild méi kleng maachen an seng Qualitéit behalen, awer dat selwecht ass net fir datt Dir Biller méi grouss maachen. D'Enn vum Resultat ass datt Dir oft Biller déi wäit sinn wéi d'Bild op dem Bildschierm vun engem Mënsch gesinn, dat heescht datt se néideg sinn fir eng ganz grouss Datei ze downloaden.
SVG adresséiert dëser Erausfuerderung. Well d'Vecte grafisch skalierbar sinn, kënnt Dir ganz kleng Dateigréisst hunn, onofhängeg vun wéi grouss dës Biller eventuell ugewisen ginn. Dëst wäert schliesslech positiv Auswierkungen op d'Gesamtplang vun der Säit an d'Downloadgeschwindegkeet hunn.
CSS Styling
SVG Code kann och direkt op d'HTML vun enger Säit hinzugefügt ginn. Dëst ass bekannt als "Inline SVG". Ee vun de Virdeeler vun der Inline-SVG benotzt ass datt datt déi Grafiken eigentlech vum Browser op Basis vun Ärem Code gezeechent sinn, ass et net néideg datt eng HTTP-Ufro fir eng Bilddatei ze kréien. Een anere Virdeel ass datt den Inline-SVG mat CSS kann stilvoll sinn.
Braucht Dir d'Faarf vum SVG-Symbol ze änneren? Anstatt dat Bild an e puer Aart vun der Editéierungssoftware ze öffnen an ze exportéieren an d'Datei erofzemaachen, kënnt Dir einfach d'SVG-Datei mat e puer Zeilen vun CSS änneren.
Dir kënnt och aner CSS-Styles op SVG Grafike benotzen fir se op Hover-Staaten oder fir gewësse Designbedarf z'änneren. Dir kënnt d'Grafik och animéieren fir eng Bewegung an eng Interaktivitéit op eng Säit ze addéieren.
Animatiounen
Well InLigne SVG Dateien kënnen mat CSS styléiert ginn, kënnt Dir och CSS Animatiounen op hinnen benotzen. CSS transforméiert an Iwwergänge sinn zwee einfache Weeër fir e puer Liewensdauer fir SVG-Fichieren ze addéieren. Dir kënnt en räich Flash-Erliefnisser op enger Säit erreechen, ouni de Downsides, déi mat Flash op Websäiten erliewe komm sinn.
Verwenden vum SVG
Wärend wéi SVG ass, kënnen dës Grafiken net all aner Bildformat ersetzen, déi Dir op Ärer Websäit benotzt. Fotoen déi eng Deep Color Tieft brauchen nach ëmmer e JPG oder vläicht e PNG-Fichier ze sinn, awer einfache Biller wéi Icons sinn perfekt ugestallt als SVG.
SVG kann och als komplex Illustratiounen sinn, wéi Firmenlogos oder Grafiken an Diagrammer. All d'Grafiken profitéieren vun skalierbarer, konnt mat CSS eegestänneg sinn an déi aner Virdeeler déi an dësem Artikel opgezielt sinn.
Betriede fir eeler Browserën
D'aktuell Ënnerstëtzung fir SVG ass ganz gutt an de modernen Websäiten. Déi eenzeg Browser, déi wierklech dës Ënnerstëtzung ënnerstëtzen, sinn äeren Versionen vum Internet Explorer (Version 8 a méi) a puer äeren Android Versionen. Alles an allem, e ganz klenge Prozentsaz vun der Surfpopulatioun benotzt nach ëmmer dës Browsers, an dës Zuel nach weider schrumpft. Dëst bedeit datt SVG sou zimlech sécher op Websäiten haut genutzt kënne ginn.
Wann Dir e Réckgang fir SVG wëllt bidden, kënnt Dir e Tool wéi Grompicon aus der Filament Group benotzen. Dës Ressource kritt Dir ären SVG-Bilddateien an erstallt PNG Fallbacks fir méi Browser.
Edited by Jeremy Girard op 1/27/17