SVG w HTML
SVG mogą być osadzone w dokumentach HTML za pomocą następujących znaczników: <embed> <object> lub <iframe>.
Kod SVG mogą być osadzone bezpośrednio na stronie HTML, czy można połączyć bezpośrednio do pliku SVG.
Używając <embed> tag
<Embed>:
- Zalety: Wszystkie główne przeglądarki są obsługiwane, a także umożliwia włączony
- Wady: Nie zaleca się stosowania w HTML4 i XHTML (ale dozwolone w HTML5)
Składnia:
<embed src="circle1.svg" type="image/svg+xml" />
wyniki:
Użycie znacznika <object>
<Object>:
- Zalety: Wszystkie główne przeglądarki są obsługiwane, a wsparcie dla HTML4, XHTML i standardu HTML5
- Wady: nie zezwala na używanie skryptów.
Składnia:
<object data="circle1.svg"
type="image/svg+xml"></object>
wyniki:
Użyj tagów <iframe>
<Iframe>:
- Zalety: Wszystkie główne przeglądarki są obsługiwane, a także umożliwia włączony
- Wady: Nie zaleca się stosowania w HTML4 i XHTML (ale dozwolone w HTML5)
Składnia:
<iframe src="circle1.svg"></iframe>
wyniki:
SVG osadzone bezpośrednio w kodzie HTML
Firefox, Internet Explorer9, Google Chrome i Safari, można osadzić kod SVG bezpośrednio w HTML.
Uwaga: SVG mogą być osadzone bezpośrednio w Operze.
Przykłady
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
Spróbuj »
Link do SVG
Można również link do etykiety z <a> SVG: Link do SVG
Można również link do etykiety z <a> SVG:
<a href="circle1.svg">View SVG file</a>
wyniki:
Zobacz Plik SVG