Ce este SVG?
- SVG standuri pentru Scalable Vector Graphics
- SVG este utilizat pentru a defini grafice pentru Web
- SVG este o recomandare W3C
HTML <svg> Element
HTML <svg> Elementul (introduced in HTML5) este un container pentru grafica SVG.
SVG are mai multe metode pentru căi de desen, cutii, cercuri, text și imagini grafice.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin <svg> element.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4 | 9 | 3.0 | 3.2 | 10.1 |
SVG Cercul
Exemplu
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html> Încearcă - l singur » SVG dreptunghi
Exemplu
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
Încearcă - l singur » SVG Dreptunghi rotunjit
Exemplu
<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>
Încearcă - l singur » SVG stele
Exemplu
<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>
Încearcă - l singur » SVG Logo
Exemplu
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</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>
Sorry, your browser does not
support inline SVG.
</svg>
Încearcă - l singur » Diferențele dintre SVG și Canvas
SVG este un limbaj pentru a descrie grafica 2D în XML.
Canvas atrage grafica 2D, pe zbor (with a JavaScript) .
SVG este bazat pe XML, ceea ce înseamnă că fiecare element este disponibil în SVG DOM. Aveți posibilitatea să atașați manipulare eveniment JavaScript pentru un element.
In SVG, fiecare formă desenat este amintit ca un obiect. În cazul în care atributele unui obiect SVG sunt modificate, browser-ul poate automat re-face forma.
Canvas este redat pixel cu pixel. În pânză, o dată pe grafic este tras, este uitat de către browser. În cazul în care poziția sa ar trebui să fie schimbat, întreaga scenă trebuie să fie redesenat, inclusiv orice obiecte care ar fi putut fi acoperite de grafic.
Comparație între Canvas și SVG
Tabelul de mai jos prezintă câteva diferențe importante între Canvas și SVG:
| Canvas | SVG |
|---|---|
|
|
Pentru a afla mai multe despre SVG, vă rugăm să citiți Tutorial SVG .