W HTML5, można osadzić elementy SVG bezpośrednio na stronach HTML.
Osadzanie SVG bezpośrednio do strony HTML
Oto przykład prostej grafiki SVG:
i tu jest kod HTML:
Przykład
<!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> Spróbuj sam " SVG Code explanation:
- SVG obrazu zaczyna się od <svg> elementu
- Szerokość i wysokość Atrybuty <svg> elementu określić szerokość i wysokość obrazu SVG
- <circle> Element służy do rysowania okręgu
- CX i CY atrybuty określają xiy współrzędne środka okręgu. Jeśli cx i cy są pomijane, centrum okręgu jest ustawiona na (0, 0)
- r atrybut definiuje promień okręgu
- Skok i udar szerokości atrybuty kontrolować sposób pojawia się zarys kształtu. Stawiamy kontur okręgu do 4PX zielonej "granicy"
- fill atrybut odnosi się do koloru wewnątrz okręgu. Ustawiamy kolor wypełnienia na żółty
- Zamykający </svg> tag zamyka obraz SVG
Uwaga: Ponieważ SVG jest zapisywany w formacie XML, wszystkie elementy muszą być odpowiednio zamknięte!