Эта статья в основном представляет основные концепции SVG, а также разницу между SVG и Canvas, и, наконец, дает простой пример, чтобы облегчить всем, чтобы лучше понять масштабируемую векторную графику SVG. Рекомендуется всем.
Энциклопедия Байду:
SVG Scalable Vector Graphics-это графический формат, основанный на расширяемом языке разметки (XML), который описывает двумерную векторную графику. SVG-это новый двухмерный векторный графический формат, разработанный W3C, а также является сетевым векторным графическим стандартом в спецификации. SVG строго следует за XML -синтаксисом и использует описательный язык в текстовом формате для описания содержания изображения, поэтому это векторный графический формат, который не зависит от разрешения изображения.
Что такое SVG?SVG относится к масштабируемой векторной графике (масштабируемая векторная графика)
SVG используется для определения графики на основе векторов для сетей
SVG определяет графику в формате XML
Изображения SVG не потеряют качество графики, когда они будут увеличены или изменены по размеру.
SVG является стандартом для Всемирного паутинового альянса
SVG - это целое со стандартами W3C, такими как DOM и XSL
Разница между холстом и SVG:Svg
SVG - это язык, который использует XML для описания 2D -графики.
SVG основан на XML, что означает, что каждый элемент в SVG DOM доступен. Вы можете прикрепить обработчик событий Javascript к элементу.
В SVG каждая рисованная фигура рассматривается как объект. Если свойства изменения объекта SVG, браузер может автоматически воспроизводить графику.
Функции:
Нет зависимости разрешения
Поддержка обработчиков событий
Лучше всего для приложений с большими областями рендеринга (например, Google Maps)
Высокая сложность может замедлить рендеринг (без применения, которое переиглучает DOM)
Не подходит для игровых приложений
Холст
Canvas рисует 2D -графику через JavaScript.
Canvas отображается Pixel от Pixel.
В холсте, как только график нарисован, он не продолжает привлекать внимание браузера. Если его положение изменится, вся сцена также должна быть перекрашена, включая любой объект, который мог быть перезаписан графикой.
Функции:
В зависимости от разрешения
Обработчики событий не поддерживаются
Слабая способность рендеринга текста
Возможность сохранять изображения результатов в .png или .jpg формат
Лучше всего подходит для игр, многие из которых часто перекрашены
Пример SVG:Скопировать код