Share
SVG, of Schaalbare vectorafbeeldingen, is een XML-stijl markup driven vector grafische rendering engine voor de browser. SVG wordt ondersteund in elke browser, behalve in 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?
Vandaag zullen we SVG onderzoeken en uitleggen waarom de vraag: "welke moet ik gebruiken?" wordt meestal beantwoord door "wat probeer ik te doen?". Raadpleeg de documentatie van Mozilla over het onderwerp voor een volledige lijst met elementen waaruit SVG bestaat. U kunt de SVG DOM-API daar ook bekijken.
We beginnen met een overzicht van enkele unieke voordelen van SVG. Vervolgens zullen we, in plaats van alle 80 SVG-knooppunttypen te bekijken, uitleggen hoe Illustrator snel een SVG-document in een webpagina kan krijgen. We zullen ook een kijkje nemen op D3.js, een krachtige JavaScript-bibliotheek voor SVG-manipulatie.
"SVG is niet bedoeld voor pixelmanipulatie."
SVG heeft nogal wat voordelen ten opzichte van afbeeldingen of op doek gebaseerde weergaven voor bepaalde toepassingen. SVG is niet bedoeld om te worden gebruikt voor pixelmanipulatie; nochtans, behandelt het vectorafbeeldingen en programmatische vectormanipulatie zeer goed.
In het geval dat je het nog niet hebt gehoord, is resolutie-onafhankelijkheid en browseragnosticisme tegenwoordig een hot topic in de front-end ontwikkeling (denk aan "responsive design"). De meeste oplossingen die bestaan om op problemen gebaseerde problemen op te lossen (bijvoorbeeld voor netvliesschermen) hebben betrekking op een grote hoeveelheid onnodige gegevens die worden gedownload (hi-res beeldvervanging) of een compromis voor de ene of de andere browser (alle resoluties in de hand nemen, zelfs wanneer het scherm het verschil niet zal weergeven). Dit maakt ons afhankelijk van de snelheid van het datadownload-snelheidsbottekort om afbeeldingen met een hogere resolutie naar apparaten te brengen die zich vaak op draadloze gegevensnetwerken bevinden. Niet ideaal.
"SVG biedt een manier om grafische elementen met volledige resolutie te maken, ongeacht het schermformaat, welk zoomniveau of welke resolutie het apparaat van uw gebruiker heeft."
SVG biedt een manier om grafische elementen met volledige resolutie te maken, ongeacht het schermformaat, welk zoomniveau of welke resolutie het apparaat van uw gebruiker heeft. Dit is iets dat tot SVG, we zagen alleen met slimme elementstyling via CSS en tekstweergave. Het gebruik van divs en: na elementen om eenvoudige vormen en andere effecten te maken is niet nodig met SVG. In plaats daarvan kunt u vectorvormen van alle soorten maken.
Dus je schrijft HTML? JavaScript? CSS? Goed. Dan weet u al veel van wat u moet weten om SVG te schrijven. SVG gebruikt in feite een XML-compatibel formaat om de weergavevormen te definiëren. Verder kun je stijlen in CSS stylen en interactief maken met JavaScript. Meerdere JS-bibliotheken bestaan om u te helpen in deze wereld, zoals D3.js en Raphael. Hier is een voorbeeld van een SVG-elementgroep (het Envato-blad). Je kunt dit voorbeeld ook zien op JSFiddle.
De DOM-knooppuntgebaseerde API van SVG is al toegankelijker dan de canvascan API op de clientzijde. Met deze constructie kunt u:
De DOM API biedt nog een aantal duidelijke voordelen voor het gebruik van SVG.
Wanneer u afbeeldingen in een html-document gebruikt met de
Ondanks de browseroorlogen biedt de DOM API, in alle browsers, een uitgebreide hoeveelheid flexibiliteit op het gebied van scriptactiviteit, die zich uitstrekt tot SVG-elementen. Styling SVG gebeurt via CSS. Door API's voor browserevenementen beschikbaar te maken voor SVG-elementen, maakt interactief gedrag een makkie. Sluit eenvoudigweg een handler aan op een specifiek knooppunt van het SVG-element en u bent klaar.
Dit is niet waar voor elementen die op het canvas worden getekend. Omdat het canvas eenvoudig een pixelweergave-engine is, worden de getekende elementen niet als objecten in het geheugen bewaard. Het script zou de taak hebben om deze elementen verzameld te houden en alle relevante positie- en groottegegevens te controleren om gebeurtenissen in een gebeurtenislus te zoeken en af te vuren. Hiernaast zou ook de z-indexering door het script moeten worden afgehandeld.
Laten we een voorbeeld bekijken. Stel dat u de zweeftekst boven een cirkel in canvas wilt detecteren. Opmerking: we zeggen alleen dat het canvas de volledige breedte van het browservenster is en dat we jQuery gebruiken om het voorbeeld beknopt te houden.
Accentsconagua
var circleCenter = [200, 300], radius = 50; $ (window) .on ("mousemove", functie (e) var mx = e.pageX, my = e.pageY; if (mx> circleCenter [0] - radius && mx < circleCenter[0] + radius && my > circleCenter [1] - radius && mijn < circleCenter[1] + radius) // now we are hovering ); Hoewel dit niet noodzakelijkerwijs een moeilijk of ongewoon codepatroon is, lijkt het een frustrerend proces als u gewend bent aan de browser-API, alleen maar om te controleren op zweven. Dit is een heel gebruikelijk patroon in andere lagere interface-programmeerengines zoals Unity3D of Processing. Maar in de webwereld hebben we tools tot onze beschikking die al veel gemeenschappelijke interactieve doelen hanteren die we mogelijk hebben. Je zou een aantal gemaksfuncties kunnen schrijven om algemene taken uit te voeren, maar zou je liever niet ter zake komen? In tegenstelling hiermee zien we de eenvoud van dezelfde taak met SVG.
$ ("svg path # circle"). on ("hover", functie (event) // That's all.); Dit is duidelijk veel meer tijd-efficiënt voor ontwikkelaars die eenvoudige interactiviteit scripten.
Er zijn veel JavaScript-bibliotheken beschikbaar voor canvas (zoals KineticJS, waarmee je een aantal ontzettend gave dingen kunt doen), maar als je op mij lijkt, gebruik je geen full-on physics-engines in je webtoepassingen. heb ik meestal schaalbare pictogrammen, interactieve grafieken en gedetailleerde, esthetisch mooie manieren nodig om informatie aan mijn gebruikers te presenteren.De meeste fysica die ik nodig heb zijn eenvoudige versmallingsvergelijkingen.Deze grafische elementen kunnen eenvoudig worden gemaakt met SVG en een veelheid aan eenvoudige fysica vergelijkingen zullen waarschijnlijk de rest van mijn behoeften behandelen. Laten we daarom een paar praktische toepassingen voor SVG bekijken.
Nu we hebben gekeken naar enkele voordelen van SVG, laten we eens kijken waarom veel ontwikkelaars nog steeds kiezen om SVG niet te gebruiken. Er zijn twee hoofdredenen waarom SVG niet door veel ontwikkelaars wordt gebruikt.
Niemand wil echt echt zitten en de punten in de SVG XML bewerken. Gelukkig hoeft niemand dat te doen! Dit is het deel dat mensen vaak niet beseffen; er zijn tools om SVG te bewerken, dus je hoeft het nooit met de hand te doen.
Als u een vectoreditor bezit, kunt u uw bestand waarschijnlijk opslaan als een svg. Ga je gang en probeer het uit. Open Illustrator, teken een cirkel of twee en sla het bestand vervolgens op als SVG. Open vervolgens dat bestand in Sublime Text of een andere teksteditor. U ziet meteen dat, naast wat extra metagegevens, de SVG XML klaar is om rechtstreeks in uw HTML-bestand te plaatsen. Je zult het waarschijnlijk zien (de ouder svg) elementen.
Hoewel u uw SVG XML rechtstreeks in een HTML-bestand kunt neerzetten, wat als u wilt dat de SVG dynamisch wordt gemaakt? D3.js is "een JavaScript-bibliotheek voor het manipuleren van documenten op basis van gegevens". Met andere woorden, het is geweldig voor het genereren van SVG-elementen zoals staafdiagrammen en lijndiagrammen op basis van een set gegevens. We hebben ervoor gekozen om D3 te laten zien vanwege zijn overeenkomende vocabulaire met de daadwerkelijke SVG-implementatie in de browser; wees je ervan bewust dat er andere geweldige SVG-bibliotheken in het wild zijn (met name Raphael.js).
Hoewel D3.js meer doet dan SVG-manipulatie, kortheidshalve, is dat alles wat we het voor vandaag zullen gebruiken. (Bekijk de voorbeelden op de officiële site van D3.js en bekijk deze workshop die Mike op zijn persoonlijke site heeft geplaatst.)
In dit eerste voorbeeld maken we eenvoudig een pulserende cirkel door gebruik te maken van Math.sin en een iterator met een setInterval. Pulserende cirkel
In dit voorbeeld werken we een grafiek met een geplotte lijn bij met enkele willekeurige waarden. Lijn grafiek
SVG zal veel van uw behoeften aan de weergave van afbeeldingen binnen de browser aan. Hoewel er voldoende redenen zijn om SVG te gebruiken, zoals bij alles wat goed is, zijn er dingen die het niet goed doet.
Hier zijn een paar handige links om je verder te verankeren in SVG!
Welk ander gebruik heeft u gevonden voor SVG? Laat het ons weten in het commentaargedeelte en bedankt voor het lezen.
