Vektorgrafik med SVG (Scalable Vector Graphics)
Adobe SVG viewer )
Moderna webbläsare klarar av att visa vektorgrafik direkt i sidan utan extra plugins. Har du en sådan är bilden du ser här ovan inte en vanlig pixelbild utan den ritas upp med hjälp av vektorer. Fördelen med vektorer framför pixlar är att den är skalbar. Om du skulle skriva ut den här sidan så kommer ovanstående bild vara betydligt skarpare är om den vore en pixelbaserad bild.
Varför är SVG intressant
SVG 1998 ). SVG är ett öppet format vilket betyder att det inte är besudlat med patent eller annan upphovsrätt problematik. Med andra ord, det är inte någon annan som äger papperet du skriver på! Stödet för SVG har länge varit eftersatt men har på senare tid fått ett rejält uppsving. SVG kan i många fall ersätta Flash (som också från början också var ett vektorformat).
SVG funkar i dom flesta webbläsare (även iPhone). Notera att SVG inte funkar i äldre versioner av Internet Explorer utan hjälp av Adobes SVG Viewer plugin. Internet Explorer version 9 har dock fullt stöd för SVG direkt i dokumentet. Jag har gjort ett antal skärmdumpar på denna sida i olika webbläsare och olika operativsystem (använd back knappen för att komma tillbaka hit ).
Skärmdump Internet Explorer 9, Win7 (PNG, 61.87 kB)Skärmdump Internet Explorer 8, WinXP, Adobe SVG Viewer (JPG, 93.98 kB)Skärmdump Internet Explorer 6, WinXP, Adobe SVG Viewer (PNG 56.99 kB)Skärmdump Firefox 3.6, Win7 (PNG, 58.01 kB)Skärmdump Firefox 3.6, Mac OSX (PNG, 86.93 kB)Skärmdump Google Chrome 8, WinXP (JPG, 101.29 kB)Skärmdump Google Chrome 8, Mac OS X (PNG, 74.79 kB)Skärmdump Opera, WinXP (JPG, 101.61 kB)Skärmdump Safari 5, Mac OS X (PNG, 83.91 kB)
Notera att dessa skärmdumpar är gamla. Många webbläsare har betydligt bättre stöd för SVG idag.
Bädda in SVG i HTML
Här nedan följer ett antal tester på olika sätt att bädda in SVG grafik på en webbsida. Notera att resultaten kan komma att se lite olika ut beroende på vilken webbläsare och version på denna du använder dig av (har dock märkt ökad kompabilitet för varje uppdatering av webbläsarna).
Jag är ingen vetenskapsman på HTML (har dock jobbat med det i 17 år). Efter mycket tester har jag kommit fram till att det mest bakåtkompatibla sättet att bädda in SVG i ett HTML-dokument är:
<object width="340" height="437" type="image/svg+xml" data="/images/pentagram.svg" style="background-color: transparent; border: 0 0;">
Förklaring
<OBJECT> förstås av alla webbläsare men kanske inte innehållet
Om inte innehållet förstås så visas en <img src="pixel_bild.png"> i stället (denna ignoreras om OBJECT förstås)
Lägg in alternativ text med ev. länk (denna ignoreras om OBJECT förstås)
Detta upplägg gör användarupplevelsen transparent. Du kan få samma sida att se likadan ut även i äldre webbläsare.
I nyare webbläsare räcker det med att skriva:
<img src="bild.svg" alt="bild" />
Utan quirks funkar inte detta i äldre läsare så som oldIE s.
Test av olika sätt att bädda in SVG
HTML5 : I nyare webbläsare kan man skriva in SVG vektor data direkt i HTML koden
<!DOCTYPE html>
Testa denna länk för att se om det fungerar (inte kompatibelt med äldre webbläsare)
IMG : Fungerar i Safari och Google Chrome (även senare Firefox), dock inte i äldre webbläsare.
<img src="HEAProduktion_green_256x64px.svg" WIDTH="256" HEIGHT="64" ALT="svg" TYPE="image/svg-xml" WMODE="transparent"/>
EMBED : För nyare webbläsare (om ytan är tom här under har du en gammal webbläsare)
<embed src="/images/pyramid_lotus_dot.svg" type="image/svg+xml" />
EMBED : Med äldre syntax (fungerar i Firefox, den enda om du inte har Adobe SVG Viewer installerad):
<EMBED NAME="SVG Preview" SRC="/images/pyramid_lotus_dot.svg"
Problemet med detta är att det kallas på en plugin för att hantera data. Detta kan funka i MSIE om man laddar ner Adobes SVG Viewer.
OBJECT : (Se ovan)
(Notera att det finns en bugg i äldre versioner av Safari 5 (WebKit) som gör att <object> bakgrunder alltid blir vita hur man än gör, läs mer om buggen här . Detta gäller inte Google Chrome som också använder WebKit. Detta är en bugg som är fixad om du uppdaterat din Safari. )
SVG Syntax Exempel
Exempelkod SVG:
<?xml version="1.0"?>
För att bädda in den på ett kompatibelt sätt
<object width="340" height="437" type="image/svg+xml" data="/images/pentagram.svg" style="background-color: transparent; border: 0 0;">
Resultat:
Adobe SVG viewer )
Eller ett enklare exempel med gradering
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Resultat:
Cirklar med style:hover funktion
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Resultat
Inbäddande av bilder i SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Resultat
Konvertera från SVG formatet
ImageMagick med bibehållen transparance
convert -background none anagogi_logo03_bg1.svg anagogi_logo03.png
Om du kör Ubuntu eller annat Debian baserat system, installera libsvg , snabbt, snyggt och enkelt att använda.
http://librsvg.sourceforge.net/docs/man-rsvg.php
sudo apt-get install librsvg2-common librsvg2-bin
Enkel konvertering
rsvg-convert -w 512 -h 512 anagogi_logo03.svg anagogi_logo03_512px.png
Ändra storlek
rsvg-convert --width 512 --height 512 anagogi_logo03.svg anagogi_logo03_512px.png
Skala bilden till dubbla storleken
rsvg-convert --x-zoom 2.0 --y-zoom 2.0 anagogi_logo03.svg anagogi_logo03_512px.png
Geometri och Rottal i SVG
Se exempel med en artikel jag skrivit om rottal. I dokumentet är grafiken är skrivet direkt i XML/HTML-koden som SVG. Fördelarna med detta är flera.
Endast 1 kontakt med serven krävs (i vanliga fall är det inte är ovanligt med upp till 100 kontakter per sida)
Skalbart (se skärmdump från Google Chrome )
Extremt liten filstorlek. I och med att jag använder kompression på serven så är hela dokumentet bara 11.46 kB (11732 byte)
http://www.anagogi.com/vector/anagogi01.xhtml
eller en mörk variant
http://www.anagogi.com/vector/anagogi02.xhtml
Relaterade dokument
ImageMagick
JPEG Tools
Exif-Data
Länkar
