SVG înseamnă Grafică vectorială scalabilă. Este un tip unic de format de imagine pentru grafică vectorială scrisă în Extensible Markup Language (XML).

În acest tutorial, voi explica de ce doriți să utilizați imagini SVG și cum le puteți utiliza în CSS și HTML.

De ce ar trebui să utilizați imagini SVG?

Există o serie de motive pentru a utiliza imagini SVG, dintre care unele sunt:

  • Imaginile SVG nu își pierd calitatea atunci când sunt mărite sau redimensionate.
  • Acestea pot fi create și editate cu un IDE sau un editor de text.
  • Sunt accesibile și animabile.
  • Au o dimensiune mică a fișierului și sunt foarte scalabile.
  • Și pot fi căutate, indexate, scriptate și comprimate.

Acum să vedem cum puteți lucra efectiv cu imagini SVG.

Cum să descărcați imaginea SVG utilizată în acest tutorial

Dacă doriți să lucrați cu imaginea SVG pe care am folosit-o în acest tutorial, urmați pașii (și diagrama) de mai jos pentru a o descărca.

  • Mergi la unDraw.
  • Schimbați culoarea de fundal în galben.
  • În caseta de căutare, căutați cuvântul fericit.
Pagina de pornire a unDraw
  • Faceți clic pe imaginea numită Vești fericite.
  • În fereastra pop-up, faceți clic pe Descărcați SVG în proiectele dvs. buton.
Descărcați fișierul SVG

Dacă ați urmat corect pașii de mai sus, imaginea SVG ar trebui să fie acum pe computer.

1611776765 790 Cum se utilizeaza imagini SVG in CSS si HTML

Acum, deschideți imaginea SVG în IDE-ul dvs. preferat sau în editorul de text. Redenumiți-l în fericit.svg sau orice nume preferați.

Cum se utilizează imagini SVG în CSS și HTML

Există mai multe moduri diferite de a utiliza imagini SVG în CSS și HTML. Vom explora șase metode diferite în acest tutorial.

1. Cum se utilizează un SVG ca <img>

Această metodă este cel mai simplu mod de a adăuga imagini SVG pe o pagină web. Pentru a utiliza această metodă, adăugați fișierul <img> elementului la documentul dvs. HTML și faceți referire la acesta în src atribut, astfel:

<img src = "https://www.freecodecamp.org/news/use-svg-images-in-css-html/happy.svg" alt="My Happy SVG"/>

Presupunând că ați descărcat imaginea SVG din unDraw și ați redenumit-o în fericit.svg, puteți continua și adăuga fragmentul de cod de mai sus în documentul dvs. HTML.

Dacă ați făcut totul corect, pagina dvs. web ar trebui să arate exact ca demonstrația de mai jos. 👀

Când adăugați o imagine SVG folosind <img> fără a specifica dimensiunea, presupune dimensiunea fișierului SVG original.

De exemplu, în demonstrația de mai sus, nu am modificat dimensiunea imaginii SVG, așa că și-a asumat dimensiunea originală (care avea o lățime de 600.53015px și o înălțime de 915.11162px).

Notă: pentru a modifica dimensiunea originală, trebuie să specificați width și height cu CSS așa cum puteți vedea în demo-ul de mai jos. De asemenea, puteți actualiza originalul width și height direct.

Chiar dacă putem schimba dimensiunea imaginilor SVG adăugate prin <img> etichetă, există încă unele restricții dacă doriți să faceți modificări majore de stil la imaginea SVG.

2. Cum se utilizează SVG ca CSS background-image

Acest lucru este similar cu adăugarea SVG la un document HTML folosind <img> etichetă. Dar de data aceasta o facem cu CSS în loc de HTML așa cum puteți vedea în fragmentul de cod de mai jos.

body {
  background-image: url(happy.svg);
}

Când utilizați un SVG ca imagine de fundal CSS, acesta are limitări similare cu utilizarea <img>. Totuși, permite un pic mai multă personalizare.

Consultați demo-ul de mai jos și nu ezitați să faceți modificări la acesta folosind CSS.

3. Cum se utilizează imagini SVG inline

Imaginile SVG pot fi scrise direct în documentul HTML folosind<svg> </svg> etichetă.

Pentru a face acest lucru, deschideți imaginea SVG în codul VS sau IDE-ul preferat, copiați codul și lipiți-l în <body> element din documentul dvs. HTML.

<body>
 // Paste the SVG code here.
</body>

Dacă ați făcut totul corect, pagina dvs. web ar trebui să arate exact ca demonstrația de mai jos.

Când utilizați SVG inline în documentul HTML, acesta reduce timpul de încărcare, deoarece servește ca o cerere HTTP.

Utilizarea acestei metode vă permite să efectuați mai multe personalizări, spre deosebire de utilizarea fie a <img> sau background-image metode.

4. Cum se folosește un SVG ca fișier <object>

De asemenea, puteți utiliza un cod HTML <object> element pentru a adăuga imagini SVG la o pagină web utilizând sintaxa codului de mai jos:

<object data="https://www.freecodecamp.org/news/use-svg-images-in-css-html/happy.svg" width="300" height="300"> </object>

Folosiți data atribut pentru a specifica adresa URL a resursei pe care o veți folosi de obiect, care este imaginea SVG în cazul nostru.

Folosești width și height pentru a specifica dimensiunea imaginii SVG.

Din nou, mai jos este o demonstrație pe care o puteți explora. 😃

Folosind <object> este acceptat în toate browserele care acceptă SVG.

5. Cum se folosește SVG ca fișier <iframe>

Chiar dacă acest lucru nu este recomandabil, puteți adăuga și o imagine SVG folosind un <iframe> așa cum se vede în demo-ul de mai jos.

Rețineți, totuși, că <iframe>Poate fi dificil de întreținut și va fi rău pentru optimizarea motorului de căutare (SEO) a site-ului dvs.

Folosind <iframe> învinge, de asemenea, scopul Scalabil in numele Grafică vectorială scalabilă deoarece imaginile SVG adăugate cu acest format nu sunt scalabile.

6. Cum se utilizează SVG ca

Codul HTML <embed> elementul este un alt mod de a utiliza o imagine SVG în HTML și CSS folosind această sintaxă: <embed src="https://www.freecodecamp.org/news/use-svg-images-in-css-html/happy.svg" />.

Rețineți însă că și această metodă are limitări. Potrivit MDN, majoritatea browserelor moderne au depreciat și au eliminat suportul pentru pluginurile browserului. Aceasta înseamnă că mizăm pe <embed> nu este în general înțelept dacă doriți ca site-ul dvs. să poată fi operat pe browserul utilizatorului mediu.

Mai jos este o demonstrație despre utilizarea HTML <embed> element pentru a adăuga o imagine SVG.

Concluzie

Sper că ați putut afla despre diferitele moduri de utilizare a imaginilor SVG în CSS și HTML. Acest lucru vă va ghida, sperăm, să alegeți metoda potrivită atunci când adăugați imagini SVG pe un site web.

Dacă aveți întrebări, îmi puteți trimite un mesaj pe Twitterși voi fi bucuros să răspund la fiecare.