SVG Filer i HTML og CSS
Artikel om hvordan man nemt anvender SVG filer på web sider.
Edited: 2017-10-27 19:41
I lang tid har man enten kunne vælge imellem ren HTML+CSS eller PNG, når der skulle laves grafik til webdesign, men nu da SVG er rigtigt godt understøttet i forskellige browsere, har det åbnet for en hel masse nye designmæssige muligheder.
Dem som er vant til, at arbejde med Adobe Illustrator ved hvor kompliceret tegninger det er muligt at lave med vektor grafik. Mange simple ikoner eller knapper kunne man uden problemer lave i .SVG format. Men det er også muligt at lave mere kompliceret ting.
Når man indsætter et SVG billede i HTML, kan man benytte img elementet. Det foregår på samme måde, som når man indsætter billeder i traditionelle PNG eller JPG filer.
<img src="download-button.svg" style="width:30%;">
I ovenstående eksempel vil width egenskaben styre hvor meget plads billedet optager. Højde og bredde forhold bliver automatisk udregnet.
Ønsker man at indsætte sit SVG billede i CSS, kan man benytte sig af background egenskaben, præcist som man normalt ville gøre det med almindelige billeder i raster format.
.download_button {width:10em;height:2.5em;background:url("download-button.svg") no-repeat;}
Indsætter man en SVG i CSS koden, skal man være opmærksom på, at elementet skal have en height angivelse. Uden den kan man opleve at elementet kollapser. Det skyldes at baggrunde ikke optager plads.
Fordele ved SVG filer
SVG filer vil ofte være endnu mindre end PNG og JPG filer, og når man pakker dem på serveren, inden man levere dem til brugernes browser, så vil de altså blive endnu mindre.
SVG filer er ren tekst, hvilket resultere i en ekstrem lille fil størrelse. Ofte vil man også kunne komprimere dem til endnu mindre størrelser med eksempelvis GZIP, hvilket gør dem ideelle til brug på web sider.
Højde og bredde forhold på SVG filer
Højde og bredde forhold er ikke så vigtige, da det normalt bliver bestemt automatisk ud fra width egenskaben i CSS. Det kan dog være vigtigt, at man ikke laver sit element for højt, da det så vil "skubbe" andre elementer på siden. Hvis man indsætter sin SVG som baggrund i CSS koden, så kan man hurtigt prøve sig frem til en passende height indstilling. I andre tilfælde, kan det være en god idé at udregne højde og bredde forhold.
Fortæl os hvad du tænker: