Vektorgrafik med SVG (Scalable Vector Graphics)

pentagram
(Din webbläsare verkar inte stödja SVG grafik, uppdatera eller ladda hem 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 är inget nytt påfund, formatet har funnits länge (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;">
<param name="wmode" value="transparent" />
<param name="src" value="/images/pentagram.svg" />
<img alt="pentagram" border="0" height="437" src="/images/pentagram.png" width="340" />
<br />
(Din webbläsare verkar inte stödja SVG grafik, uppdatera eller ladda hem <a href="http://www.adobe.com/svg/viewer/install/" target="_blank">Adobe SVG viewer</a>)
</object>

Förklaring

  1. <OBJECT> förstås av alla webbläsare men kanske inte innehållet
  2. 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)
  3. 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 oldIEs.

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>
<html>
<head><title>SVG Test</title></head>
<body>
<h1>Rubrik</h1>
<p>Här är lite vanlig text</p>
<div style="width:320px;height:320px;">
<svg viewBox="0 0 100 100">
<defs>
<radialGradient id="gradering">
<stop offset="0%" stop-color="#FF9900"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#gradering)" stroke="#334455"/>
</svg>
</div>
<p>Här kommer lite mer text...</p>
</body>
</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"/>

svg-bild som din webbläsare inte visar

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"
WIDTH="512" HEIGHT="512" ALT="pyramid"
PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/"
TYPE="image/svg-xml" WMODE="transparent" />

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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="340px" height="437px" viewBox="0 0 340 437"
xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve">
<title>phi (1:1.618) enclosed in a pentagram</title>
<desc>The "golden" number in a pentagram enclosed in a pentagon.
Graphics, Copyright @ 2005-2011 Hans E Andersson,
http://www.heap.se/Om/Webben/Copyright.html
</desc>
<polygon points="68.05,383.676 4.902,189.329 170.224,69.216 335.545,189.329 272.398,383.676 "/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.25" x1="170.224" y1="69.216" x2="272.398" y2="383.676"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.25" x1="68.05" y1="383.676" x2="170.224" y2="69.216"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.25" x1="68.05" y1="383.676" x2="335.545" y2="189.329"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.25" x1="335.545" y1="189.329" x2="4.902" y2="189.329"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.25" x1="272.398" y1="383.676" x2="4.902" y2="189.329"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="68.05" y1="383.676" x2="68.05" y2="437.49"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="272.398" y1="383.676" x2="272.398" y2="437.49"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="68.05" y1="427.287" x2="272.398" y2="427.287"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="63.267" y1="432.07" x2="72.513" y2="422.824"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="0.088" y1="52.057" x2="9.334" y2="42.811"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="267.265" y1="432.42" x2="276.511" y2="423.174"/>
<text transform="matrix(1 0 0 1 155.8486 420.9287)" font-family="Helvetica, Arial, sans" font-size="12">1 unit</text>
<text transform="matrix(1 0 0 1 80.4775 40.9326)" font-family="Helvetica, Arial, sans" font-size="12">1 unit</text>
<text transform="matrix(1 0 0 1 246.6255 40.9326)" font-family="Helvetica, Arial, sans" font-size="12">0.618 units</text>
<text transform="matrix(1 0 0 1 157.5586 168.9326)" fill="#FFFFFF" font-family="Helvetica, Arial, sans" font-size="10">0.382</text>
<text transform="matrix(1 0 0 1 244.5581 168.9326)" fill="#FFFFFF" font-family="Helvetica, Arial, sans" font-size="10">0.618</text>
<text transform="matrix(1 0 0 1 71.5586 168.9326)" fill="#FFFFFF" font-family="Helvetica, Arial, sans" font-size="10">0.618</text>
<text transform="matrix(0.8119 0.5838 -0.5838 0.8119 129.5337 274.8799)" fill="#FFFFFF" font-family="Helvetica, Arial, sans" font-size="10">1.618</text>
<text transform="matrix(1 0 0 1 67.6255 10.0439)" font-family="Helvetica, Arial, sans" font-size="12">1.618 units</text>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="4.902" y1="5.795" x2="4.902" y2="189.329"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="4.903" y1="47.243" x2="335.545" y2="47.243"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="4.903" y1="14.724" x2="335.545" y2="14.724"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="335.545" y1="5.795" x2="335.545" y2="189.329"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="209.251" y1="35.128" x2="209.251" y2="99.399"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.25" stroke-dasharray="2,4" x1="209.251" y1="97.571" x2="209.251" y2="189.329"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="0.44" y1="19.187" x2="9.686" y2="9.94"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="204.63" y1="51.864" x2="213.876" y2="42.618"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="329.628" y1="52.096" x2="339.117" y2="43.1"/>
<line fill="none" stroke="#000000" stroke-width="0.25" x1="330.681" y1="19.589" x2="339.926" y2="10.343"/>
<path fill="none" stroke="#FFFFFF" stroke-width="0.25" stroke-dasharray="2,4" d="M5.021,189.234
c19.852-6.431,41.035-9.906,63.028-9.906c112.858,0,204.348,91.488,204.348,204.348"/>
</svg>

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;">
<param name="wmode" value="transparent" />
<param name="src" value="/images/pentagram.svg" /> <img alt="pentagram" border="0" height="437" src="/images/pentagram.png" width="340" /> <br />(Din webbläsare verkar inte stödja SVG grafik, uppdatera eller ladda hem <a href="http://www.adobe.com/svg/viewer/install/" target="_blank">Adobe SVG viewer</a>)
</object>

Resultat:

pentagram
(Din webbläsare verkar inte stödja SVG grafik, uppdatera eller ladda hem Adobe SVG viewer)

Eller ett enklare exempel med gradering

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="gradering">
<stop offset="0%" stop-color="#FF9900"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#gradering)" stroke="#334455"/>
</svg>

Resultat:

Din webbläsare verkar inte stödja SVG grafik, uppdatera till en nyare.

Cirklar med style:hover funktion

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
circle:hover {fill-opacity:0.9;}
</style>
<g style="fill-opacity:0.7;">
<circle cx="6.5cm" cy="2cm" r="100" style="fill:#334455; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:#666666; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:#554433; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
</g>
</svg>

Resultat

Din webbläsare verkar inte stödja SVG grafik, uppdatera till en nyare.

Inbäddande av bilder i SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Även stylesheets kan användas -->
<!--<?xml-stylesheet href="svgstyle.css" type="text/css"?>-->
<image xlink:href="a_heap_wide.jpg" width="647" height="400"/>
<circle cx="110" cy="107" r="80" stroke="black" stroke-width="1" fill="#000000" style="fill-opacity:0.5;"/>
</svg>

Resultat

Din webbläsare verkar inte stödja SVG grafik, uppdatera till en nyare.

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

 


"SVG Grafik", Hans E Andersson: 2006-09-29 00:15:57, ändrad: 2015-03-24 18:05:20

 

Copyright © 2005 - 2019 HEAP. Alla rätter förbehållna. Integritetspolicy