Skalbar vektorgrafik i HTML5. Infoga Svg grafiska bilder HTML-exempel

.

Märka har ett obligatoriskt attribut src , vars värde är en absolut eller relativ sökväg till bilden:

För Tag följande attribut är tillgängliga:

Tabell 1. Taggattribut

Attribut	Beskrivning, accepterat värde
alt	Alt-attributet lägger till alternativ text till bilden. Den visas på den plats där bilden visas innan den laddas eller när grafiken är inaktiverad, och visas även som ett verktygstips när du för muspekaren över bilden. Syntax: alt="(!LANG:bildbeskrivning" . !}
korsursprung	Crossorigin-attributet låter dig ladda bilder från resurser från en annan domän med hjälp av CORS-förfrågningar. Bilder som laddats upp på duken med hjälp av CORS-förfrågningar kan återanvändas. Tillåtna värden: anonym – Begäran om gränsöverskridande ursprung görs med hjälp av en HTTP-rubrik och inga inloggningsuppgifter skickas. Om servern inte tillhandahåller referenser till servern som innehållet begärs från, kommer bilden att skadas och dess användning begränsas. use-credentials - Cross-origin-begäran görs med autentiseringsuppgifter godkända. Syntax: crossorigin="anonym" .
höjd	Height-attributet anger bildens höjd. Kan anges i px eller % . Syntax: höjd: 300px .
ismap	ismap-attributet indikerar att bilden är en del av en kartbild som finns på servern (en kartbild är en bild med klickbara områden). När du klickar på kartbilden skickas koordinaterna till servern som en URL-frågesträng. Attributet ismap är endast tillåtet om elementet är ett barn av grundämnet med ett giltigt href-attribut. Syntax: ismap .
longdesc	Bildens utökade beskrivnings-URL, utfyllnad av alt-attributet. Syntax: longdesc="http://www.example.com/description.txt" .
src	Attributet src anger sökvägen till bilden. Syntax: src="flower.jpg" .
storlekar	Ställer in bildstorleken beroende på visningsinställningarna. Fungerar bara om attributet srcset är inställt. Attributvärdet är en eller flera strängar separerade med kommatecken.
srcset	Skapar en lista över bildkällor som kommer att väljas baserat på skärmupplösning. Kan användas med eller istället för src-attributet. Attributvärdet är en eller flera kommaseparerade strängar.
använd kartan	Usemap-attributet definierar en bild som en bildkarta. Värdet måste börja med tecknet #. Värdet är associerat med värdet på taggens namn eller id-attribut
bredd	width-attributet anger bildens bredd. Kan anges i px eller % . Syntax: bredd: 100 % .

1.1. bild URL

Bildadressen kan anges i sin helhet (absolut URL), till exempel:
url(http://anysite.ru/images/anyphoto.png)

Eller via en relativ väg från dokumentera eller rotkatalogen webbplats:
url(../images/anyphoto.png) — relativ sökväg från dokumentet,
url(/images/anyphoto.png) är en relativ sökväg från rotkatalogen.

Detta tolkas på följande sätt:
../ - betyder att gå upp en nivå, till rotkatalogen,
bilder/ - gå till mappen med bilder,
anyphoto.png - pekar på en bildfil.

1.2. Bildmått

Utan att ställa in bildens mått visas ritningen på sidan i dess verkliga storlek. Du kan redigera måtten på en bild med hjälp av bredd- och höjdattributen. Om endast ett av attributen är inställt, kommer det andra att beräknas automatiskt för att bibehålla bildens proportioner.

1.3. Grafiska filformat

JPEG-format (Förenade Fotografers Expert Grupp). JPEG-bilder är idealiska för fotografier, de kan innehålla miljontals olika färger. Bilder komprimeras bättre än GIF-filer, men text och stora områden med enfärgade kan bli fläckiga.

GIF-format (Graphics Interchange Format). Idealisk för att komprimera bilder som har områden med enfärgade, som logotyper. GIF-filer låter dig ställa in en av färgerna till transparent, vilket gör att bakgrunden på en webbsida kan visas genom en del av bilden. GIF-filer kan också innehålla enkla animationer. GIF-filer innehåller endast 256 nyanser, vilket gör att bilderna ser fläckiga och orealistiska ut, som affischer.

PNG-format (Bärbar nätverksgrafik). Innehåller de bästa funktionerna i GIF- och JPEG-format. Den innehåller 256 färger och låter dig göra en av färgerna transparent, samtidigt som du komprimerar bilder till en mindre storlek än en GIF-fil.

APNG-format (Animerad bärbar nätverksgrafik). Ett bildformat baserat på PNG-formatet. Låter dig lagra animationer och stöder även transparens.

SVG-format (Skalbar vektorgrafik). En SVG-ritning består av en uppsättning geometriska former som beskrivs i XML-format: en linje, en ellips, en polygon och så vidare. Både statisk och animerad grafik stöds. Uppsättningen funktioner inkluderar olika transformationer, alfamasker, filtereffekter, möjligheten att använda mallar. SVG-bilder kan ändras storlek utan att förlora kvalitet.

BMP-format (Bitmappsbild). Representerar en okomprimerad (ursprunglig) bitmapp vars mall är ett rektangulärt rutnät av pixlar. En bitmappsfil består av en rubrik, en palett och grafikdata. Rubriken lagrar information om den grafiska bilden och filen (pixeldjup, höjd, bredd och antal färger). Paletten anges endast i de bitmappsfiler som innehåller palettbilder (8 bitar eller mindre) och som inte består av fler än 256 element. Grafiska data representerar själva bilden. Färgdjupet i detta format kan vara 1, 2, 4, 8, 16, 24, 32, 48 bitar per pixel.

ICO-format (Windows-ikon). Lagringsformat för filikoner i Microsoft Windows. Dessutom används Windows-ikonen som en ikon på webbplatser på Internet. Det är en bild av detta format som visas bredvid webbplatsadressen eller bokmärket i webbläsaren. En ICO-fil innehåller en eller flera ikoner, vars storlek och färg ställs in separat. Storleken på ikonen kan vara vilken som helst, men de vanligaste ikonerna är fyrkantiga ikoner med sidorna 16, 32 och 48 pixlar.

2. Tagga

Märka

Namnattributet är tillgängligt för taggen, som anger namnet på kartan. Värdet på namnattributet för taggen

Element

3. Tagga

Märka beskriver endast en hotspot i bildkartan på klientsidan. Elementet har ingen avslutande tagg. Om en hotspot överlappar en annan, kommer den första länken från listan över hotspots att implementeras.

Tabell 2. Taggattribut

Attribut	Kort beskrivning
alt	Anger alternativ text för det aktiva området på kartan.
koordinater	Anger regionens position på skärmen. Koordinater anges i längdenheter och separeras med kommatecken: för cirkel— Koordinaterna för centrum och cirkelns radie. för rektangel— koordinater för det övre vänstra och nedre högra hörnet; för polygon— koordinaterna för polygonens hörn i rätt ordning, det rekommenderas också att ange de sista koordinaterna lika med de första, för den logiska kompletteringen av figuren.
ladda ner	Kompletterar href-attributet och talar om för webbläsaren att resursen ska laddas i samma ögonblick som användaren klickar på länken, istället för att till exempel öppna den i förväg (som en PDF-fil). Genom att ge ett namn till ett attribut ger vi alltså ett namn till det laddade objektet. Det är tillåtet att använda ett attribut utan att ange dess värde.
href	Anger URL:en för länken. En absolut eller relativ länkadress kan anges.
hreflang	Anger språket för det associerade webbdokumentet. Används endast i kombination med href-attributet. De accepterade värdena är en förkortning som består av ett par bokstäver som anger språkkoden.
media	Anger vilka enhetstyper filen ska optimeras för. Värdet kan vara vilken mediefråga som helst.
rel	Fyller ut href-attributet med information om förhållandet mellan det aktuella dokumentet och det länkade dokumentet. Godkända värden: alternativ – en länk till en alternativ version av dokumentet (till exempel en utskrivbar sida, en översättning eller en spegel). författare - en länk till författaren av dokumentet. bokmärke är en permanent URL som används för bokmärken. hjälp — länk till hjälp. licens - En länk till upphovsrättsinformation för detta webbdokument. nästa/föregående - anger förhållandet mellan enskilda webbadresser. Genom denna uppmärkning kan Google fastställa att innehållet på dessa sidor är länkat i en logisk sekvens. nofollow - förbjuder sökmotorn att följa länkar på denna sida eller på en specifik länk. noreferrer - indikerar att när du följer en länk ska webbläsaren inte skicka en HTTP-begäran header (Referrer), som innehåller information om vilken sida webbplatsbesökaren kom från. prefetch - indikerar att måldokumentet ska cachelagras, dvs. Webbläsaren i bakgrunden laddar sidans innehåll till sin cache. sök Indikerar att måldokumentet innehåller ett sökverktyg. tag - Anger ett nyckelord för det aktuella dokumentet.
former	Anger formen på aktivpunkten på kartan och dess koordinater. Det kan ha följande värden: rect är ett rektangulärt aktivt område; cirkel - aktivt område i form av en cirkel; poly - aktivt område i form av en polygon; standard - hotspoten upptar hela bildens område.
mål	Anger var dokumentet ska laddas när länken klickas. Tar följande värden: _self - sidan laddas in i det aktuella fönstret; _blank - sidan öppnas i ett nytt webbläsarfönster; _parent - sidan läses in i den överordnade ramen; _top - Sidan laddas i ett fullständigt webbläsarfönster.
typ	Anger MIME-typen för länkfilerna, dvs. filtillägget.

4. Ett exempel på att skapa en bildkarta

1) Vi markerar källbilden i aktiva områden med önskad form. Areakoordinater kan beräknas med hjälp av ett fotobehandlingsprogram, t.ex. Adobe Photoshop eller Måla.

Ris. 1. Ett exempel på bilduppmärkning för att skapa en karta

2) Ställ in kartnamnet genom att lägga till det i taggen

Jpg" alt="(!LANG:blommor_foto" width="680" height="383" usemap="#flowers"> !}
Ris. 2. Ett exempel på att skapa en bildkarta, när du klickar på en blomma kommer du till en sida med en beskrivning

Vektorgrafik används ofta i tryck. Men för webbplatser kan vi också använda det med SVG ( Skalbar vektorgrafik - skalbar vektorgrafik). Enligt W3.org-specifikationen definierar SVG som:

Ett språk för att beskriva tvådimensionell grafik i XML. SVG tillåter användning av tre typer av objekt: vektorgrafiska former (till exempel banor som består av raka linjer och kurvor), bilder och text.

Även om SVG sedan augusti 2011 har inkluderats i W3C:s rekommendationer, denna teknik används praktiskt taget inte i webbprojekt, även om det har ett antal fördelar jämfört med bitmappar. I den här serien med självstudier kommer vi att introducera hur man arbetar med SVG-element på webbsidor.

Fördelar med SVG

Resolution Oberoende

Rasterbilder är upplösningsberoende. Grafik blir opresenterbart när storleken ändras till vissa skalor. FRÅN vektorgrafik en sådan situation är i princip omöjlig, eftersom allt representeras av matematiska uttryck som automatiskt räknas om när skalan ändras, och kvaliteten bevaras under alla förhållanden.

Minska antalet HTTP-förfrågningar

SVG kan bäddas in direkt i ett HTML-dokument med svg-taggen, så webbläsaren behöver inte uppmanas att visa grafiken. Detta tillvägagångssätt har en god effekt på laddningsegenskaperna på webbplatsen.

Stilar och manus

Inbäddning med svg-taggen gör det också enkelt att styla grafik med CSS. Du kan ändra objektegenskaper som bakgrundsfärg, transparens, ramar och så vidare. På liknande sätt kan grafik manipuleras med JavaScript.

Lätt att redigera och animera

SVG-objekt kan animeras med CSS eller JavaScript. Du kan även modifiera SVG-objekt med textredigerare.

Mindre filstorlek

SVG har en mindre filstorlek jämfört med rastergrafik.

Grundläggande SVG-former

Enligt specifikationen kan vi rita flera grundläggande former: linje, polylinje, rektangel, cirkel, ellips. Alla element måste infogas i taggen . Överväg de grundläggande delarna i detalj.

Linje

Ett element används för att rita en linje i SVG . Den ritar ett segment för vilket två punkter måste definieras: början och slutet.

Början av segmentet definieras av attributen x1 och y1, och slutpunkten definieras av koordinaterna i attributen x2 och y2.

Det finns också två andra attribut (slag och streckbredd) som används för att definiera färgen respektive bredden på linjen.

Detta objekt liknar , men med elementet Du kan rita flera linjer samtidigt.

Element Innehåller poängattributet, som används för att specificera punkternas koordinater.

Rektangel renderad med element . Vi måste definiera bredd och höjd.

För att rita en cirkel, använd elementet . I följande exempel skapar vi en cirkel med radien 100 , som definieras i r-attributet:

De två första attributen cx och cy definierar koordinaterna för mitten. I exemplet ovan har vi satt båda koordinaterna till 102. Standardvärdet är 0.

För att rita en ellips, använd elementet . Det fungerar precis som en cirkel, men vi kan specifikt ställa in x- och y-radier med hjälp av rx- och ry-attributen:

Element Visar polyedriska former som en triangel, en hexagon och så vidare. Till exempel:

Använda editorn för vektorgrafik

Det är enkelt att rendera enkla SVG-objekt till HTML. Men när objektets komplexitet ökar kan denna praxis leda till att en stor mängd arbete måste göras.

Men du kan använda vilken redigerare som helst för vektorgrafik (t.ex. Adobe Illustrator eller inkscape) för att skapa objekt. Om du äger ett sådant verktyg är det mycket lättare att rita de nödvändiga objekten i dem än att koda grafik i en HTML-tagg.

Du kan kopiera kommandon för vektorgrafik från en fil till ett HTML-dokument. Eller så kan du bädda in .svg-filen med något av följande element: embed , iframe och object .

Resultatet blir detsamma.

Webbläsarstöd

SVG har bra stöd i de flesta moderna webbläsare, förutom IE version 8 och tidigare. Men uppgiften kan lösas med hjälp av JavaScript-biblioteket. För att göra saker enklare kan du använda verktyget ReadySetRaphael.com för att konvertera SVG-kod till Raphael-format.

Först laddar vi och inkluderar biblioteket i ett HTML-dokument. Sedan laddar vi .svg-filen, kopierar och klistrar in den resulterande koden i funktionen efter laddning:

I body-taggen placerar vi följande div-element med ID:t rsr .

Och allt är klart.

I nästa handledning i serien kommer vi att titta på hur man formaterar SVG-objekt i CSS.

Vektorgrafik används ofta i tryckt material. När det gäller hemsidan kan vi här även använda vektorgrafik genom SVG eller Scalable Vector Graphics (skalbar vektorgrafik). I den officiella W3.org-specifikationen beskrivs det så här:

Ett språk för att beskriva tvådimensionell grafik med hjälp av XML. SVG tillåter oss att använda tre typer grafiska objekt: Vektorgrafiska former (som banor som består av raka och böjda linjer), bilder och text.

Tekniken har varit tillgänglig sedan 1999, och den 16 augusti 2011 ingick den i listan över W3C-rekommendationer. SVG används fortfarande inte i stor utsträckning, trots de många fördelarna med att använda vektorgrafik istället för bitmappar.

Fördelar med skalbar vektorgrafik

När det gäller att använda grafik på webbsidor, erbjuder skalbar vektorgrafik flera fördelar jämfört med rastergrafik, som inkluderar:

Resolution Oberoende

Rastergrafik (eller bitmapp) är upplösningsberoende eftersom de skapas med hjälp av pixlar. Om ett sådant grafiskt element ökar i storlek, kommer stora rutor omedelbart att bli synliga. Detta händer inte med vektorgrafik, eftersom de inte är beroende av upplösning, utan istället bygger på matematiska beräkningar, vilket gör att vi kan öka dem till valfri storlek och inte tappa kvalitet.

Minska HTTP-förfrågningar

Skalbar vektorgrafik kan bäddas in direkt i ett HTML-dokument med svg-taggen, så att webbläsaren inte behöver en extra begäran om grafiken. Det har också en positiv effekt på webbplatsens prestanda.

Styling och manus

Direkt integration med svg-taggen kommer också att tillåta oss att styla grafiken när CSS hjälp. Vi kan ändra objektegenskaper som bakgrundsfärg, opacitet, ramar och så vidare, på samma sätt som i HTML. Vi kan även styra grafik genom javascript.

Möjlighet att animera och redigera

Ett SVG-objekt kan animeras med ett animeringselement eller med ett JS-bibliotek som jQuery. SVG-objektet kan också redigeras med vilken textredigerare eller grafikprogram som helst som (gratis) eller .

Mindre filstorlek

SVG har en mindre filstorlek än rastergrafik.

Rita enkla former med SVG

Efter specifikationen kan vi rita som polygoner, cirklar, linjer eller ellipser med SVG och för att webbläsaren ska kunna generera skalbar vektorgrafik måste alla dessa grafiska element placeras i "svg"-taggar. Låt oss titta på exemplen nedan:

Linje

För att rita en linje med SVG kan vi använda elementet "line". Detta element används för att rita en rak linje, så det kommer bara att bestå av två punkter: början och slutet.

Som du kan se ovan anges linjens startpunktskoordinat i de två första attributen x1 och x2, och slutpunktskoordinaten anges i y1 och y2 attributen.

Det finns också två andra attribut här: stroke och stroke-width , som är ansvariga för färgen och bredden på kanten. Å andra sidan kan vi också definiera dessa attribut i inline stil, enligt följande:

Style="stroke-width:1; stroke:rgb(0,0,0);"
och det kommer att ge oss samma resultat.

*

avbruten linje

Detta är väldigt likt "line", men med elementet "polyline" kan vi rita flera linjer istället för bara en. Här är ett exempel:

Elementet "polylinje" har punktattribut som innehåller alla koordinater för linjerna.

*

Rektangel

Vi kan rita en rektangel lika enkelt, bara med hjälp av det "räta" elementet. Vi behöver bara ange bredd och höjd:

*

Cirkel

Vi kan också rita en cirkel med elementet "cirkel". I det här exemplet ritar vi en cirkel med en radie på 100, som definieras av r-attributet:

De två första attributen, cx och cy, definierar cirkelns centrumkoordinat. I exemplet ovan har vi satt 102 för både x- och y-koordinaterna. Om dessa attribut inte är inställda kommer de att vara 0 som standard.

*

Ellips

Vi kan rita ellipser med elementet "ellips". Här fungerar allt på ungefär samma sätt som med cirkeln, men den här gången kan vi styra x-linjeradien och y-linjeradien separat med attributen rx och ry.

*

Polygon

Med elementet "polygon" kan vi rita polygoner, former med flera vinklar och sidor som en triangel, en oktagon. Exempel:

*

Använda vektorgrafikredigeraren

Som du kan se är det ganska enkelt att rita enkla former med SVG i HTML. Men om vi behöver ett mer komplext objekt, kommer denna metod inte längre att passa oss.

Som vi nämnde ovan kan vi lyckligtvis använda en vektorgrafikredigerare som Adobe Illustrator eller Inkscape för att göra jobbet. Om du är bekant med denna programvara kan du enkelt rita objekt med ett användarvänligt gränssnitt istället för att använda HTML-kod.

Eller så kan du också bädda in själva svg-filen med något av följande element: embed, iframe, object.

Resultatet blir liknande.

PÅ detta exempel vi använde med .

*

Webbläsarstöd för skalbar vektorgrafik

När det gäller webbläsarstöd stöds skalbar vektorgrafik redan i IE8 och tidigare. Men detta kan fixas med ett javascript-bibliotek som heter . För att göra saker enklare kommer vi att använda verktyget för att konvertera vår SVG-kod till ett format som stöds av Raphael.

För att komma igång, ladda ner och inkludera Raphael.js-biblioteket i din HTML-kod. Ladda sedan upp svg-filen till webbplatsen, kopiera och klistra in den genererade koden i följande laddningsfunktion:

window.onload=function() (
//Raphael-koden går här
}
Inuti body-taggen, infoga följande div med id-attributet rsr.

Och det är där vi är klara! Se exemplet i länken nedan.

Sammanfattningsvis

Så det är grunderna i SVG. Vi hoppas att du nu har lite förståelse för detta ämne. Detta är en av bättre sätt optimera prestandan på dina sidor, samtidigt som du tillhandahåller grafik som kan visas tydligt även på Retina-skärmar.

Som vanligt, om du är nyfiken, har vi förberett ett litet urval av ytterligare artiklar åt dig.

* (Introduktion till SVG)
* (SVG: låt oss inte vara beroende av upplösning)
* (Varför inte använda SVG?)

Tack för att du läste och vi hoppas att du tycker att den här artikeln är användbar!

Uppmärksamhet! Du har inte behörighet att visa dold text.