Een kijkje in schaalbare vectorafbeeldingen (SVG)
Vectorafbeeldingen zijn op grote schaal toegepast in gedrukte media. In een website kunnen we ook vectorafbeeldingen toevoegen met SVG of Schaalbare Vectorafbeelding. Onder verwijzing naar de officiële specificatie op W3.org, wordt SVG beschreven als:
Een taal voor het beschrijven van tweedimensionale grafische afbeeldingen in XML. SVG maakt drie soorten ßgrafische objecten mogelijk: vector grafische vormen (bijv. Paden bestaande uit rechte lijnen en curven), afbeeldingen en tekst.
Het bestaat al sinds 1999 en vanaf 16 augustus 2011 werd het een W3C-aanbeveling. Toch wordt SVG nog steeds aanzienlijk onderbenut, terwijl er veel voordelen zijn bij het gebruik van Vector in plaats van bitmap om afbeeldingen of afbeeldingen op een website te presenteren.
SVG-voordelen
Met betrekking tot het weergeven van afbeeldingen op websites biedt SVG een aantal voordelen ten opzichte van Bitmap, waaronder enkele:
Resolutie onafhankelijk
Bitmap / rasterafbeelding is afhankelijk van de resolutie - het is gebaseerd op pixels. De afbeeldingen die worden weergegeven, zien er korrelig uit wanneer de grootte wordt gewijzigd op een bepaald zoomniveau. Dat gebeurt niet met vectorgrafiek, die resolutieonafhankelijk van aard is, aangezien de afbeelding wordt uitgedrukt met een wiskundige vergelijking waardoor het schaalbaar op elk zoomniveau met behoud van kwaliteit, zelfs bij Retina Display.
HTTP-verzoek verlagen
SVG kan rechtstreeks in een HTML-document worden ingesloten svg tag, zodat de browser geen aanvraag hoeft te doen om de afbeelding te presenteren. Dit resulteert ook in betere laadprestaties voor de website.
Styling en scripting
Direct insluiten met svg tag zal ons ook in staat stellen om de grafische stijl eenvoudig te modelleren via CSS. We kunnen verander objecteigenschappen zoals achtergrondkleur, dekking, randen, enz. op dezelfde manier als bij gewone HTML-tags. Op dezelfde manier kunnen we de afbeelding ook manipuleren via JavaScript.
Kan worden geanimeerd en bewerkt
Het SVG-object kan worden geanimeerd wanneer het het animatie-element gebruikt of via JavaScript Library zoals jQuery. Het SVG-object kan ook worden bewerkt met elke tekstcode-editor of grafische software zoals Inkscape (die gratis is) of Adobe Illustrator.
Kleinere bestandsgrootte
SVG heeft een kleinere bestandsgrootte in vergelijking met Bitmap, die een vergelijkbare grafische weergave heeft.
Basisvormen tekenen met SVG
Volgens de specificaties kunnen we enkele basisvormen tekenen zoals de rechthoek, cirkel, lijn, ellips, polylijn en polygoon met SVG en om de browser de SVG-afbeelding te laten weergeven, moeten al die grafische elementen worden ingevoegd in de label. Laten we de onderstaande voorbeelden bekijken voor meer details:
Lijn
Tekenen een lijn in SVG kunnen we de
Zoals je hierboven kunt zien, wordt de coördinaat van het lijnstartpunt uitgedrukt met de eerste twee attributen x1 en x2, terwijl de coördinaat van het eindpunt van de lijn wordt uitgedrukt met y1 en y2.
Er zijn ook twee andere attributen, de beroerte en streekbreedte die worden gebruikt om respectievelijk de kleur van de rand en de breedte van de rand te bepalen. Als alternatief kunnen we deze kenmerken ook definiëren in een inline-stijl, zoals:
het doet uiteindelijk hetzelfde.
- Demo bekijken “Lijn”
polyline
Het is bijna vergelijkbaar met de
points attributen die alle coördinaten opslaan die de lijnen vormen.
- Demo bekijken “polyline”
Rechthoek
Het tekenen van een rechthoek is ook eenvoudig hiermee
- Demo bekijken “Rechthoek”
Cirkel
We kunnen ook een cirkel tekenen met de 100 straal die is gedefinieerd met r attribuut:
De eerste twee attributen, cx en cy definiëren de coördinaat van de cirkel in het midden. In het bovenstaande voorbeeld hebben we ingesteld 102 zowel voor de X en Y coördineren, als deze kenmerken niet zijn opgegeven, 0 wordt als standaardwaarde genomen.
- Demo bekijken “Cirkel”
Ellips
We kunnen een ellips tekenen met X lijnradius en Y lijnradius met rx en ry attribuut;
- Demo bekijken “Ellips”
Veelhoek
Met de
- Demo bekijken “Veelhoek”
Vector grafische editor gebruiken
Zoals u ziet, is het eenvoudig om eenvoudige objecten met SVG in HTML te tekenen. Wanneer het object echter ingewikkelder wordt, is die oefening niet langer ideaal en geeft het je hoofdpijn.
Gelukkig, zoals we hierboven hebben vermeld, kunnen we een vector grafische editor gebruiken zoals Adobe Illustrator of Inkscape om het werk te doen. Als u bekend bent met deze software, is het zeker een stuk gemakkelijker om objecten met hun GUI te tekenen in plaats van de afbeelding zelf in HTML-code te coderen.
Als u met Inkscape werkt, u kunt uw vectorafbeelding opslaan als gewone SVG en vervolgens openen in een tekstcode-editor. Nu zou u de SVG-codes in het bestand moeten vinden. Kopieer alle codes en plak deze in uw HTML-document.
Of u kunt ook het .svg bestand door een van deze elementen; embed, iframe en voorwerp, bijvoorbeeld;
De resultaten zullen uiteindelijk hetzelfde zijn.
In dit voorbeeld gebruik ik deze Apple iPod van OpenClipArt.org.
- Demo bekijken “iPod”
Browserondersteuning
Betreffende browserondersteuning is SVG zeer goed ondersteund in alle belangrijke browsers, behalve in IE8 en eerder. Maar deze kwestie kan worden opgelost met deze JavaScript-bibliotheek, Raphael.js genaamd. Om het u gemakkelijk te maken, gebruiken we deze tool, ReadySetRaphael.com, om onze SVG-code om te zetten in door Raphael ondersteunde indeling. Hier is hoe.
Allereerst download en neem de Raphael.js bibliotheek naar uw HTML-document. Upload vervolgens het .svg bestand naar de site, kopieer en plak de gegenereerde code binnen de volgende lading functie;
window.onload = function () // de Raphael-code komt hier
Binnen in de lichaam label, leg het volgende div met RSR id attribuut;
Dat is alles, je bent klaar. Bekijk het voorbeeld van de onderstaande link.
- Demo bekijken “Raphael”
Laatste gedachten
Dat is dus de basis met SVG. We hopen dat u nu een goed begrip van dit onderwerp hebt. Het is de beste manier om uw site te optimaliseren voor elke schermresolutie, zelfs voor gebruik op het Retina-display.
Zoals altijd, als je een avontuurlijk persoon bent, hebben we hier nog een paar verwijzingen en discussies geplaatst om dieper op dit onderwerp in te gaan.
- Een inleiding tot SVG - W3-scholen
- Resolutie onafhankelijk met SVG - Smashing Magazine
- Waarom gebruik je geen SVG? - NetTuts
Bedankt voor het lezen en we hopen dat je deze post leuk vond.
- Demo bekijken
- Download de bron
