English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 поддерживает встроенный SVG. SVG файлы можно вставить в документ HTML с помощью следующих тегов: <embed>, <object> или <iframe> (embed и iframe都属于 встроенные рамки), с помощью этих тегов код SVG можно напрямую вставить в страницу HTML, или мы можем напрямую链接 к файлу SVG.
SVG - это расширяемые векторные графики (Scalable Vector Graphics)
SVG используется для определения векторной графики для Интернета.
SVG использует формат XML для определения графики.
SVG изображения не теряют качества при увеличении или изменении размера.
SVG является стандартом Всемирной сети
Преимущества использования SVG по сравнению с другими форматами изображений (например, JPEG и GIF):
SVG изображения можно создавать и редактировать с помощью текстового редактора.
SVG изображения могут быть проиндексированы, скриптованы или сжаты.
SVG является масштабируемым
SVG изображения можно печать в любом разрешении с высоким качеством.
SVG можно масштабировать без потери качества изображения.
Microsoft Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают встроенный SVG.
В HTML5 вы можете напрямую嵌入 элемент SVG в страницу HTML:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Основной учебный сайт (oldtoolbag.com)</title> </head> <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>Тест на ‹/›
Результат после выполнения будет следующим:
!doctype html <html> <head> <meta charset="utf-8"> <title>Использование SVG для рисования кругов oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <circle cx="200" cy="100" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff" /> </svg> </body> </html>Тест на ‹/›
В теге <svg>heightиwidthПараметр устанавливает размер SVG документа;versionПараметр может определить используемую версию SVG;xmlns Параметр может определить пространственную область SVG;
<circle> - это тег SVG, используемый для создания кругов;cx и cy Параметр определяет центр круга; x и y Координаты, если пропустить эти параметры, то точка будет установлена в (0, 0),rПараметр определяет半径 круга;
stroke и stroke-width Параметр контролирует способ отображения контура формы;fill Параметры устанавливают цвет внутри формы;
Посмотрим на демонстрационное изображение:
!doctype html <html> <head> <meta charset="utf-8"> <title>Рисование прямоугольника с помощью SVG oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1"> <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/> </svg> </body> </html>Тест на ‹/›
SVG - это язык, который использует XML для описания 2D-графики.
Canvas рисует 2D-графику с помощью JavaScript.
SVG основан на XML, что означает, что каждый элемент в SVG DOM доступен. Вы можете прикрепить обработчик событий JavaScript к элементу.
В SVG каждый нарисованный графический объект рассматривается как объект. Если свойства SVG объекта изменяются, браузер может автоматически перерисовать графический объект.
Canvas рендерится по пикселям. В canvas, после того как图形 был нарисован, он больше не получает внимания от браузера. Если его положение изменяется, то вся сцена также должна быть перерисована, включая любые объекты, которые могут быть скрыты图形ами.
В таблице ниже перечислены некоторые различия между canvas и SVG.
| Canvas | SVG |
|
|