Лучшее руководство по HTML5 встроенный SVG в 2024 году. В этом руководстве вы можете изучить Что такое SVG?,SVG преимущество,Поддержка браузеров,SVG встроен непосредственно в HTML-страницы,примеров,Разница SVG и Canvas между двумя,Сравнение SVG и Canvas,
HTML5 встроенный SVG
HTML5 поддерживают встроенный SVG.
Что такое SVG?
- SVG масштабируемая векторная графика средство (Scalable Vector Graphics)
- SVG для графики используется для определения вектора на основе сети
- SVG использует графику определения формата XML
- SVG изображение, чтобы увеличить или изменение размера его качества изображения не будут потеряны
- SVG является стандартом Консорциум World Wide Web
SVG преимущество
По сравнению с другими форматами изображений (например, JPEG и GIF), используя SVG преимущества:
- SVG изображения могут быть созданы и изменены с помощью текстового редактора
- SVG изображения могут быть найдены, индексируется, сценарий или сжатый
- SVG является масштабируемым
- SVG изображения могут быть напечатаны в любом высокого разрешения качества
- SVG могут быть преувеличены в качество изображения не снижается
Поддержка браузеров
Internet Explorer 9 +, Firefox, Opera, Chrome, Safari и поддержка встроенного SVG.
SVG встроен непосредственно в HTML-страницы
В HTML5, вы сможете SVG элементы непосредственно в страницу HTML:
примеров
<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>
Попробуйте »
Результаты:
К сожалению, ваш браузер не поддерживает встроенный SVG.Узнайте больше о SVG учебнике, пожалуйста , посетите SVG учебник .
Разница SVG и Canvas между двумя
SVG является 2D графики с использованием XML-описания языка.
Холст рисовать 2D графики с использованием JavaScript.
SVG основан на XML, что означает, что каждый элемент в SVG DOM доступен. Вы можете прикрепить обработчики событий JavaScript для элемента.
В SVG, каждый считается обращается графические объекты. В случае изменения объекта недвижимости SVG, браузер может автоматически воспроизводить графику.
Холст оказывается пиксель за пикселем. В полотне, как только графика рисуется завершена, он не будет по-прежнему внимание браузера. Если позиция изменилась, то вся эта сцена также необходимо перерисовать, в том числе любые объекты, которые, возможно, были покрыты графикой.
Сравнение SVG и Canvas
В следующей таблице перечислены некоторые различия между холстом и SVG.
Canvas | SVG |
---|---|
|
|