SVG för webben was last modified: Dec 14th, 2015 by Johan Aineland

SVG för webben

5
okt
2015
Johan Aineland blogg

SVG (Scalable Vector Graphics) är en öppen grafikstandard som redan 2003 blev rekommenderad av W3C (World Wide Web Consortium), men det är inte förrän på senare tid som SVG har börjat användas i allt större utsträckning, mycket beroende på stödet för SVG i moderna webbläsare.

Varför ska man då använda SVG? Jo för att vektorgrafik innebär att du kan skala tex din Twitter-ikon till precis vilken storlek du vill med bibehållen kvalitet. Du behöver inte oroa dig ur ett SEO-perspektiv heller utan man kan använda t.ex. description-taggar som sökmotorerna kan läsa.

Hur gör man då för att använda sig av SVG? Du skapar din SVG-grafik i ett program som kan hantera vektorgrafik och exporterar filen som .svg (t.ex. Adobe Illustrator). Ett bra tips är att använda s.k. SVG-sprites, vilket innebär att du samlar samtliga SVG-ikoner i samma fil. Varje fil har sedan ett symbol-id som du anropar där du ska visa din ikon. För ingående artikel om detta kolla in CSS-tricks som har en bra och utförlig guide.

Bixue på Twitter