Kategori: BILD
Module-logo

Använd text för att rita SVG-bild

SVG-formatet har både fördelar och nackdelar. För att förstå hur bildformatet är uppbyggt kan man själv prova att skapa bilder med en texteditor.

Resultat

Lär dig SVG-formatets (Scalable Vector Graphics) uppbyggnad genom att skapa enkla SVG-bilder.

Lösning

1. Välj exempel och redigera koden i rutan SVG-kod.
2. Klicka Uppdatera SVG-bild för att se bilden.

Exempel:

SVG-kod
SVG-bild

Spara bilden som en fil

Om du vill spara SVG-bilden som en bildfil utför följande steg:

1 Kopiera in SVG-koden i ett text-dokument
Starta en text-editor exempelvis Microsoft® Anteckningar. Kopiera in texten från rutan SVG-kod.
SVG-kod
2 Spara filen
Spara filen med filändelsen .svg (inte .txt) och kodning UTF-8. Inspektera filen genom att dubbelklicka på den. En webbläsare visar då bilden. UTF-8 vald
En del versioner av webbläsaren Internet Explorer kan dock ha problem med att visa bilden.
SVG-bild

Bakgrund

SVG-formatet används huvudsakligen på webbsidor och i XML-system. SVG är också en del av Simplified Technical Illustrations.

SVG-bilder kan skapas med Adobe® Illustrator® eller annan applikation för vektorgrafik. Men SVG kan också skapas via text. Exempelvis kan diagram och bilder skapas dynamiskt av programvara.