Varför använder du inte SVG?

SVG, eller Skalbar vektorgrafik, är en XML-stil markupdriven vektor grafisk återgivningsmotor för webbläsaren. SVG stöds i varje webbläsare, förutom IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?

Idag ska vi undersöka SVG och förklara varför frågan om "vilken ska jag använda?" svaras vanligtvis av "vad försöker jag göra?". För att få en fullständig lista över element som utgör SVG, kolla in Mozillas dokument om ämnet. Du kan också se SVG DOM API där.

Översikt

Vi börjar med att beskriva några unika fördelar med SVG. I stället för att granska alla 80 SVG-nodtyp kommer vi att förklara hur Illustrator snabbt kan få ett SVG-dokument till en webbsida. Vi tar också en titt på D3.js, ett kraftfullt SVG-manipulations JavaScript-bibliotek.

"SVG är inte avsett att användas för pixelmanipulation."

Viktiga fördelar med SVG

SVG har en hel del fördelar framför bilder eller kanvasbaserade renderingar för vissa applikationer. SVG är inte menat att användas för pixelmanipulation; Det hanterar emellertid vektorgrafik och programmatisk vektormanipulation mycket bra.

Upplösning Oberoende

Om du inte har hört, är upplösningsoberoende och agnosticism för webbläsare ett hett ämne i front-end-utveckling (tänk "responsiv design") dessa dagar. De flesta av de lösningar som finns för att lösa upplösningsbaserade problem (till exempel i näthinneskärmar) involverar antingen en stor mängd onödiga data som hämtas (högbildsbyte) eller kompromiss för en webbläsare eller den andra (upping alla resolutioner, jämn när skärmen inte kommer att visa skillnaden). Detta gör att vi använder sig av hastigheten på flaskhalsen för nedladdning av data för att få högupplösta bilder till enheter som ofta finns på trådlösa datanät. Inte idealisk.

"SVG erbjuder ett sätt att göra grafiska element med full upplösning, oavsett storlekskärm, vilken zoomnivå eller vilken upplösning din användares enhet har."

SVG erbjuder ett sätt att göra grafiska element med full upplösning, oavsett vilken skärmstorlek, vilken zoomnivå eller vilken upplösning din användares enhet har. Detta är något som fram till SVG, vi såg bara med smart element styling via CSS och text rendering. Använda divs och: efter att elementen har skapat enkla former och andra effekter är onödiga med SVG. I stället kan du skapa vektorformer av alla slag.

Super-tillgängligt DOM Node-Based API

Så skriver du HTML? JavaScript? CSS? Bra. Då vet du redan mycket om vad du behöver veta för att skriva SVG. SVG använder faktiskt ett XML-kompatibelt format för att definiera sina renderingsformer. Utöver detta kan du faktiskt utforma former i CSS och göra dem interaktiva med JavaScript. Flera JS-bibliotek finns för att hjälpa dig i den här världen, som D3.js och Raphael. Här är ett exempel på en SVG-elementgrupp (Envato-bladet). Du kan också se detta exempel på JSFiddle.

SVG: s DOM-nodbaserade API är redan tillgänglig mer än API-klientens klient-sida. Med denna konstruktion kan du:

• Skapa SVG-dokumentbaserade bilder på serverns sida
• Inspect SVG-element som något annat HTML-element
• Programmera former, stilar och positioner med teknik som du redan känner till (JavaScript och CSS)
• Fäst händelsehanterare till SVG noder

DOM API ger ytterligare en rad klara fördelar för att använda SVG.

Inga onödiga HTTP-förfrågningar

När du använder bilder i ett HTML-dokument med tagg, du definierar en fil som användarens webbläsare ska begäran. Den här förfrågan tar upp bandbredd och kräver mer dyrbar tid att ladda ner. Om din bild istället är en uppsättning domnoder knyter den den extra HTTP-begäran ut, vilket gör din webbplats snabbare och mer användarvänlig.

Easy Interactive Scripting

Trots webbläsarkrigarna erbjuder DOM API, över alla webbläsare, en omfattande flexibilitet när det gäller skriptinteraktivitet, som sträcker sig till SVG-element. Styling SVG händer via CSS. Att ha API-filer för webbläsarhändelser som är tillgängliga för SVG-element gör att interaktivt beteendeskript är en cinch. Anslut bara en hanterare till en specifik nod i SVG-elementet, och du är inställd.

Detta gäller inte för element som dras in på duken. Eftersom duken helt enkelt är en pixelbildningsmotor, hålls de dragna elementen inte i minnet som föremål. Skriptet skulle ha till uppgift att hålla dessa element samlade och övervaka all relevant position och storlek information att leta efter och brand händelser i en händelsesslinga. Utöver detta måste z-indexering hanteras av manuset också.

Låt oss ta en titt på ett exempel. Säg att du vill upptäcka svävar över en cirkel i duk. Obs! Vi säger bara att duken är full bredd i webbläsarfönstret, och vi använder jQuery bara för att hålla exemplet kortfattat.

var circleCenter = [200, 300], radie = 50; $ (fönster) .on ("mousemove", funktion (e) var mx = e.pageX, my = e.pageY; om (mx> circleCenter [0] - radie && mx < circleCenter[0] + radius && my > circleCenter [1] - radie && min < circleCenter[1] + radius) // now we are hovering  );

Även om detta inte nödvändigtvis är ett svårt eller ovanligt kodmönster, om du är van vid webbläsarprogrammet, verkar det som en frustrerande process att bara kolla på svävaren. Detta är ett mycket vanligt mönster i andra lägre nivågränssnittsprogrammeringsmotorer som Unity3D eller Processing. Men i webbvärlden har vi verktyg till vårt förfogande som redan hanterar många gemensamma interaktiva mål vi kan ha. Du kan skriva en uppsättning av bekvämlighetsfunktioner för att göra vanliga uppgifter, men skulle du inte komma till rätta? Däremot kan vi se enkelheten i samma uppgift med SVG.

$ ("svg path # circle"). ("sväva", funktion (händelse) // Det är allt.);

Detta är tydligt mycket mer tidseffektivt för utvecklare som skriptar enkel interaktivitet.

Praktiska tillämpningar

Det finns många JavaScript-bibliotek där ute för duk (som KineticJS, som låter dig göra några ganska bra saker. Men om du är som jag, använder du inte full-on-fysikmotorer i dina webbapplikationer. Istället jag behöver oftast skalbara ikoner, interaktiva grafer och detaljerade, estetiskt underbara sätt att presentera information för mina användare. De flesta fysik jag behöver är enkla lätta ekvationer. Dessa grafiska element skapas enkelt med SVG och en mängd enkla fysik ekvationer kommer antagligen att hantera resten av mina behov. Så låt oss titta på några praktiska tillämpningar för SVG.

• Graf Eftersom SVGs största styrka är grundläggande vektorformer fungerar det naturligtvis mycket bra för grafer och infographics. Det är inte bara bra att skapa statiska grafer från givna siffror, men det är också väl lämpat för "live" -grafer, matas av AJAX-förfrågningar, användarinmatning eller slumpmässigt genererad data.
• Vägkarta Vägkartor består av hårda linjer och exakta former. Dessa former kan representeras bra med vektorgrafik, och låna sig för att zooma in i kartan för ytterligare detaljer.
• Komplexa UI-element Låt oss säga att du ville ha ett UI-element som såg ut som en staplad pyramid av cirklar. Hur skulle du göra det i HTML och CSS? Tja, du skulle först skapa en massa divs för varje hål, vilket ger dem en viss gränsenradie och gränsstilar. Då skulle du placera dem inom en innehållande div. Nu, vad händer om du vill ha en enda gradient över hela grejen? Du skulle sannolikt behöva använda maskering eller någon annan teknik. Du skulle hellre inte använda bilder, eftersom de inte är skalbara och kan inte programmatiskt återges eller ändras. Istället, varför dra inte elementet i Illustrator, och spara det som en SVG-fil? Det här låter dig ha ett enda, skalbart element utan att behöva oroa dig för att hantera flera div.
• Logos De flesta logotyper är vektorbaserade. Du kan definiera ett SVG-dokument som din logotyp och släppa det överallt, skalning i flygning till vilken storlek det behöver vara utan att kompromissa med kvaliteten eller ta upp för mycket bandbredd.
• Enkla spel Det är ingen hemlighet att duk passar bra för spelframställning. En del av anledningen till detta är att spel ofta inte är beroende av vektorgrafik. De använder snarare pixelbaserad konst och animering. SVG är dock ett bra alternativ för spel som kräver mindre tecken animering och mer information display (tänk Sudoku).

Varför brukar du inte använda den

Nu när vi har tittat på några av fördelarna med SVG, låt oss undersöka varför många utvecklare fortfarande väljer att inte använda SVG. Det finns två huvudorsaker till att SVG inte används av många utvecklare.

1. De har aldrig hört talas om det eller aldrig trodde att de behövde det, så har ignorerat det (det här är inte längre en ursäkt!)
2. Ett SVG XML-dokument av någon komplexitet ser relativt arkaisk och komplicerad ut, och det är uppenbarligen inte så lätt som att bara använda en bild.

Så självklart vill ingen verkligen sitta och redigera punkterna i SVG XML. Lyckligtvis behöver ingen! Det här är den del som människor ofta inte inser Det finns verktyg för att redigera SVG, så du behöver aldrig göra det för hand.

SVG Verktyg

Illustrator, Inkscape

Om du äger en vektorredigerare kan det troligen spara din fil som en svg. Fortsätt och prova det. Öppna Illustrator, rita en cirkel eller två, och spara sedan filen som SVG. Öppna sedan den filen i Sublime Text eller en annan textredigerare. Du ser omedelbart att, förutom några extra metadata, är SVG XML redo att släppa direkt in i din HTML-fil. Du kommer troligen att se (grupp), (väg), och självklart (parent svg) -elementen.

d3.js

Medan du helt kan släppa din SVG XML direkt i en HTML-fil, vad händer om du vill att SVG ska skapas dynamiskt? D3.js är "ett JavaScript-bibliotek för att manipulera dokument baserade på data". Med andra ord är det bra att generera SVG-element som stapeldiagram och linjekalkyler baserat på en uppsättning data. Vi har valt att visa D3 på grund av dess matchande ordförråd till själva SVG-implementeringen i webbläsaren; vara medveten om att det finns andra stora SVG-bibliotek ute i naturen (särskilt Raphael.js).

Även om D3.js gör mer än SVG-manipulation, för korthetens skull, det är allt vi ska använda för idag. (Se till att du tittar på exemplen på D3.js officiella webbplats, och kolla in den här verkstaden Mike har lagt upp på sin personliga sida.)

Exempel 1: Pulserande cirkel

I det här första exemplet skapar vi helt enkelt en pulserande cirkel genom att använda Math.sin och en iterator med en setInterval. Pulserande cirkel

Exempel 2: Uppdatering av linjeplott

I det här exemplet uppdaterar vi en plottad linjediagram med några slumpmässiga värden. Linjediagram

När ska du inte använda SVG?

SVG kommer att hantera mycket av dina behov för in-browser bildåtergivning. Medan det finns många skäl att använda SVG, som med något bra, finns det saker som det inte går bra med.

• Om din rendering kräver tusentals noder är det mer prestanda att göra rendering i duk (eftersom webbläsaren inte behöver skapa objekt för varje del gjord, och behöver inte göra den vektormatris som krävs för att göra objektet. I stället målar det i huvudsak kartlagda pixlar.)
• Om din ansökan kräver stöd för IE8, kom ihåg att du måste antingen tillhandahålla en annan vektoråtergång (till exempel den mer konvoluterade VML) eller inte använda vektorn alls och istället förlita sig på bilder med svagt storlek.

Användbara länkar

Här är några användbara länkar för att få dig vidare förankrad i SVG!

• Raphael.js
• Processing.js, baserat på det kraftfulla Processing, ett Java-bildhanteringsverktyg
• jQuery SVG
• Sitepointartikel: Hur man väljer mellan Canvas och SVG
• Canvas och SVG Performance
• Nettuts + artikel om Raphael

Vilka andra användningsområden har du hittat för SVG? Låt oss veta i kommentarsektionen och tack så mycket för att läsa.