Inserarea unei imagini SVG intr-un document HTML

Dupa ce in articolul precedent am vazut ce este o imagine SVG, cum poate fi aceasta generata, la ce foloseste si cum poate fi obtinut fisierul XML ce o genereaza, in acest articol vom vedea mai multe modalitati de plasare a imaginii SVG in pagina HTML.

1. Plasarea ca si fiser imagine

Ca pentru orice format clasic de imagine va trebui sa specificam sursa fisierului in interiorul tag-ului img.

<img src="icon.svg" alt="" width="139" height="139" />

Ce este diferit fata de o imagine intr-un format bitmap?

Putem schimba dimensiunile fisierului SVG marind imaginea iar aceasta, fiind constituita din vectori, isi va mentine claritatea la orice rezolutie.

Plasand fisierul SVG in documentul HTML in interiorul tag-ului img vom putea face modificari asupra imaginii in interiorul fisierului SVG in codul paginii XML.
In exemplul de mai jos am modificat culoarea de umplere a cercului direct in SVG fara a modifica imaginea in Illustrator sau in programul de grafica vectoriala pe care l-am folosit pentru crearea fisierului.

2. Plasarea ca si XML

Codul XML ce genereaza imaginea vectoriala SVG poate fi plasat in interiorul documentului HTML.
Vom plasa in document (in punctul in care vrem sa inseram imaginea) numai partea de care avem nevoie si anume tot ceea ce este cuprins in interiorul tag-ului svg.

<svg width="139px" height="139px">
<g id="Layer_1">
<circle fill="#BDAECF" cx="69.5" cy="69.5" r="69"/>
</g>
<g id="Layer_2">
<path fill="#FFFFFF" d="M60.281,55.328c15.415,8.637,22.263,23.684,28.523,39.25c0.221-9.886,1.523-19.296,7.355-27.507
c-1.182,3.731-2.92,7.292-3.516,11.22c-0.539,3.543,0.924,4.651,4.239,3.725c7.243-2.023,11.667-6.69,13.396-14.031
c1.104-4.684,0.943-9.646,3.17-14.085c0.893-1.781-0.083-2.301-1.764-2.5c-8.199-0.971-17.271,4.536-20.365,12.509
c-1.887,4.864-2.526,9.982-2.965,15.146c-0.125,1.486,0.629,3.339-1.67,4.661c-2.998-8.971-5.551-17.951-10.97-25.69
c-5.722-8.173-13.468-12.852-23.379-13.518c-9.449-0.636-18.091,2.315-27.122,6.396c7.662,4.406,9.324,6.081,13.675,13.315
c1.459,2.426,2.862,4.895,4.458,7.229c8.087,11.827,18.406,15.97,32.437,13.106c5.059-1.032,5.641-2.04,3.172-6.732
C74.329,69.028,68.343,61.333,60.281,55.328z"/>
</g>
</svg>

Care este avantajul aducerii imaginii SVG ca si linii de cod XML in pagina HTML?

In acest fel putem personaliza imaginea vectoriala direct in documentul HTML fara a trebui sa mentinem fisierul SVG ca atasament. Aceasta metoda ne da posibilitatea de a putea aplica reguli de stil dar si tranzitii CSS asupra variilor elemente ce compun imaginea SVG.

In urmatorul articol vom schimba culoarea de umplere a imaginii SVG prin intermediul CSS si ii vom aplica un comportament de hover insotit o tranzitie CSS.