HTML5 inline SVG
HTML5 obsługuje pływających SVG.
Czym jest SVG?
- Środki grafiki wektorowej SVG Scalable (Scalable Vector Graphics)
- SVG grafiki wykorzystane do określenia wektora sieci opartej
- SVG używa formatu XML i grafiki HD
- SVG, aby powiększyć lub zmiana wielkości jego jakości obrazu nie zostaną utracone
- SVG jest standardowym Wide World Web Consortium
zaletą SVG
W porównaniu do innych formatów graficznych (takich jak JPEG i GIF), z wykorzystaniem zalet SVG:
- Obrazy SVG mogą być tworzone i modyfikowane za pomocą edytora tekstu
- Obrazy SVG mogą być przeszukiwane, indeksowane, skryptów lub skompresowane
- SVG jest skalowalny
- Obrazy SVG mogą być drukowane w dowolnej rozdzielczości wysokiej jakości
- SVG mogą być przesadzone w jakości obrazu nie zmniejsza
Pomoc Browser
Internet Explorer 9+, Firefox, Opera, Chrome, Safari i wsparcie inline SVG.
SVG osadzony bezpośrednio na stronie HTML
W HTML5, będzie można do SVG elementy bezpośrednio na stronie HTML:
Przykłady
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
Spróbuj »
wyniki:
Niestety, Twoja przeglądarka nie obsługuje pływających SVG.Dowiedz się więcej o kursie SVG można znaleźć samouczek SVG .
SVG i Canvas Różnica pomiędzy tymi dwoma
SVG jest 2D grafiki przy użyciu języka XML opisu.
Płótno do rysowania grafiki 2D przy użyciu JavaScript.
SVG podstawie XML, co oznacza, że każdy element SVG DOM dostępny. Można dołączyć obsługi zdarzeń JavaScript dla elementu.
W SVG, każdy uważa się za sporządzone obiektów graficznych. W przypadku zmiany właściwości obiektu SVG, przeglądarka może automatycznie odtwarzać grafiki.
Płótno jest renderowany piksel po pikselu. Na płótnie, gdy grafika jest zasysane jest kompletny, nie będzie w dalszym ciągu uwagę użytkowników sieci. Jeśli pozycja zostanie zmieniona, wówczas cała scena musi również być wymodelowana, w tym wszelkich przedmiotów, które mogły zostać pokryte grafiką.
Porównanie SVG i Canvas
W poniższej tabeli przedstawiono niektóre różnice między płótnie i SVG.
Canvas | SVG |
---|---|
|
|