În HTML5, puteți încorpora elemente SVG direct în paginile HTML.
SVG încorpora direct în paginile HTML
Aici este un exemplu de simplu grafic SVG:
și aici este codul HTML:
Exemplu
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<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 Code explanation:
- O imagine SVG începe cu un <svg> Element
- Lățimea și înălțimea atributele <svg> Elementul defini lățimea și înălțimea imaginii SVG
- <circle> Elementul este folosit pentru a desena un cerc
- Cx și cy atributele definesc coordonatele x și y ale centrului cercului. Dacă cx și cy sunt omise, centrul cercului este setat la (0, 0)
- r atribut definește raza cercului
- Accidentul vascular cerebral si accident vascular cerebral-lățime atributele controlează modul în care apare conturul unei forme. Am stabilit conturul cercului la un verde 4px "border" de "border"
- De fill atribut se referă la culoarea din interiorul cercului. Am stabilit culoarea de umplere la galben
- De închidere </svg> tag - ul se închide imaginea SVG
Notă: Deoarece SVG este scris în XML, toate elementele trebuie să fie închise în mod corespunzător!