Piemēri mērogojamās vektorgrafikas (SVG) iekļaušanai HTML lapās

OBJECT
EMBED
IFRAME
IMG
HTML5
CSS

Kā SVG piemērs ir izmantots attēls, kuru šādiem nolūkiem izmanto diezgan bieži – tiger.svg. Lai labāk parādītu iekļāvuma robežas, tās ir uzdotas mazākas par tīģera attēla izmēriem. Piemēri doti gan ar, gan bez iekļautā objekta veida apraksta (parametrs type="image/svg+xml"). Dažādi pārlūki atšķirīgi parāda šos iekļautos objektus. Daži no iekļāvumiem pat tik atzīti par nepieņemamiem. Liekas, ka vispieņemamākais ir pieraksts <OBJECT data=svg_fails width=n height=n type="image/svg+xml"></OBJECT>.

Agrāk, lai varētu pārlūkā redzēt SVG attēlu, bija nepieciešams speciāls papildinājums – spraudnis. To vajadzēja norādīt pie iekļautā objekta parametriem: pluginspage="http://www.adobe.com/svg/viewer/install/". Mūsdien tas vairs nav nepieciešams.

`OBJECT`

<OBJECT data=SVG/tiger.svg width=400 height=400>
Nav redazams OBJECT
</OBJECT>

<OBJECT data=SVG/tiger.svg width=400 height=400 type="image/svg+xml">
Nav redazams OBJECT
</OBJECT>

`EMBED`

<EMBED src=SVG/tiger.svg width=400 height=400></EMBED>

<EMBED src=SVG/tiger.svg width=400 height=400 type="image/svg+xml"></EMBED>

<NOEMBED>
Nav redzams EMBED
</NOEMBED>

Nav redzams <tt>EMBED</tt>

`IFRAME`

<IFRAME src=SVG/tiger.svg width=400 height=400>
Nav redzams IFRAME
</IFRAME>

IMG

Lielākā dala mūsdienu pārlūku atbasta SVG iekļaušanu tekstā kā attēlu (līdzīgi kā PNG, JPG vai GIF formāta attēlus):

<IMG src=SVG/tiger.svg width=200 height=200 align=right>

HTML5

HTML5 atbalsta SVG kodu tiešu iekļaušanu HTML lapas tekstā:

CSS

SVG formāta attēlu stilu lapās var izmantot līdzīgi kā rastra attēlus. Piemēram, piešķirot rinkopai pamatnes attēlu: "background:url(SVG/RGBGR.svg)".

Vienkāršu SVG aprakstu iespējams iekļaut pašā stilā. Tā, piemēram, ir izveidots stila apraksts:
.izpuskoti p:after { content: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width='32' height='32' viewBox=\'0 0 16 16\' fill=\'navy\'%3e%3cpath fill-rule=\'evenodd\' d=\'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\'/%3e%3c/svg%3e"); }
Ieliekot rinkopu sadaļā, kurai piešķirta stilu klase „izpuskoti”, rindkopas beigās jabūt redzamam „putniņam”. Līdzīgi ir izveidots „gliemezis” rindkopas sākumā.

Lai varētu iekļaut SVG pašā stilu lapā, jāveic pāris izmaiņas:

attēls jāsaglabā pēc iespejas vienkāršāks, piemēram, var izmantot «Inkscape» piedāvāto iespēju saglabāt kā optimizētu SVG;
no attēla paņem tikai to daļu, kura sākas ar <svg un beidzas ar </svg>;
visus „<” aizstāj ar „%3C”;
visus „>” aizstāj ar „%3E”;
visus „"” aizstāj ar „\'”;
visus „#” aizstāj ar „%23”;
apvieno vienā rindā;
iegūto rindu ievieto starp „url("data:image/svg+xml,” un „")”.


Pamatlapa	BF	Datorklase	Sākums

Lapa ir publicēta ar CC BY–SA 4.0 licenci. Ja lapā ir ietvertas daļas uz kurām attiecas cita licence, tas norādīts atsevišķi lapas tekstā.