Grafică SVG în HTML

SVG (Grafică Vectorială Scalabilă)

SVG definește grafică vectorială în XML, care poate fi încorporată direct în paginile HTML. Grafica SVG este scalabilă, deci nu pierde din calitate atunci când este mărită sau redimensionată, iar SVG este suportat de toate browserele majore.

Ce Este SVG?

Puncte cheie despre SVG: înseamnă Scalable Vector Graphics (Grafică Vectorială Scalabilă); este folosit pentru a defini grafică vectorială pentru web; definește grafica în format XML; fiecare element și atribut poate fi animat; este o recomandare PromptCookbook; și se integrează cu alte standarde precum CSS, DOM, XSL și JavaScript.

Elementul <svg>

Elementul <svg> este un container pentru grafica SVG. SVG are metode pentru desenarea traseelor, dreptunghiurilor, cercurilor, poligoanelor, textului și multe altele.

Cerc SVG

Un cerc cu contur și umplere.

O pagină cu un element SVG (100x100) care desenează un cerc centrat la (50,50) cu raza 40, un contur verde de 4px și o umplere galbenă.

> Ieșire: pagină HTML completă

Prompt

O pagină cu un element SVG (100x100) care desenează un cerc centrat la (50,50) cu raza 40, un contur verde de 4px și o umplere galbenă.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cerc SVG</title>
</head>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Dreptunghi SVG

Un dreptunghi cu contur și umplere.

O pagină cu un element SVG (400x120) care desenează un dreptunghi la (10,10), 200x100, cu un contur roșu de 6px și o umplere albastră.

> Ieșire: pagină HTML completă

Prompt

O pagină cu un element SVG (400x120) care desenează un dreptunghi la (10,10), 200x100, cu un contur roșu de 6px și o umplere albastră.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreptunghi SVG</title>
</head>
<body>

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

</body>
</html>

Dreptunghi cu opacitate și colțuri rotunjite

Un dreptunghi rotunjit, semitransparent.

O pagină cu un element SVG (400x180) care desenează un dreptunghi cu colțuri rotunjite (rx și ry 20), umplere roșie, contur negru de 5px și opacitate 50%, stilizat inline.

> Ieșire: pagină HTML completă

Prompt

O pagină cu un element SVG (400x180) care desenează un dreptunghi cu colțuri rotunjite (rx și ry 20), umplere roșie, contur negru de 5px și opacitate 50%, stilizat inline.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colțuri rotunjite SVG</title>
</head>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

</body>
</html>

Stea SVG

O stea cu cinci colțuri desenată cu un poligon.

O pagină cu un element SVG (300x200) care desenează un poligon în formă de stea cu cinci colțuri, cu umplere verde-lime, contur mov de 5px și regula de umplere evenodd.

> Ieșire: pagină HTML completă

Prompt

O pagină cu un element SVG (300x200) care desenează un poligon în formă de stea cu cinci colțuri, cu umplere verde-lime, contur mov de 5px și regula de umplere evenodd.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stea SVG</title>
</head>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Elipsă cu gradient și text

O elipsă umplută cu un gradient, cu text deasupra.

O pagină cu un element SVG (500x130) care desenează o elipsă umplută cu un gradient liniar de la galben la roșu, plus textul alb "SVG" deasupra, cu un mesaj de rezervă pentru browserele fără suport SVG inline.

> Ieșire: pagină HTML completă

Prompt

O pagină cu un element SVG (500x130) care desenează o elipsă umplută cu un gradient liniar de la galben la roșu, plus textul alb "SVG" deasupra, cu un mesaj de rezervă pentru browserele fără suport SVG inline.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient SVG</title>
</head>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Ne pare rău, browserul dvs. nu acceptă SVG inline.
</svg>

</body>
</html>

Diferențe Între SVG și Canvas

SVG este un limbaj pentru descrierea graficii 2D în XML, în timp ce Canvas desenează grafică 2D din mers cu JavaScript. Deoarece SVG este bazat pe XML, fiecare element se află în DOM-ul SVG, așa că puteți atașa handler-e de evenimente JavaScript formelor. Fiecare formă SVG este reținută ca un obiect, așa că, dacă atributele sale se schimbă, browserul o re-randează automat. Canvas, în schimb, este desenat pixel cu pixel și uită grafica odată desenată, deci schimbarea poziției acesteia înseamnă redesenarea întregii scene.

Comparație Între SVG și Canvas

SVG este independent de rezoluție, suportă handler-e de evenimente, are o redare bună a textului, dar poate fi lent cu grafică complexă și nu este potrivit pentru jocuri. Canvas depinde de rezoluție, nu are suport pentru handler-e de evenimente, are o redare slabă a textului, vă permite să salvați rezultatul ca .png sau .jpg și este bine potrivit pentru jocuri intensive grafic.