Учебник по SVG

Цель урока HTML SVG - помочь вам быстро начать использовать SVG и использовать этот учебник в будущем в качестве быстрого справочника. Здесь мы постараемся предоставить больше примеров SVG, чтобы вы могли быстро освоить использование SVG

Введение в SVG

SVG - это аббревиатура от Scalable Vector Graphics. Это формат графики, в котором формы определяются с помощью XML. Затем XML представляетсяSVG-просмотрщиком. В настоящее время большинство веб-браузеров могут отображать SVG, как и PNG, GIF и JPG.
Пользователи Internet Explorer 8 (и более ранних версий) могут потребовать установить Adobe SVG Viewer, чтобы просматривать SVG в браузере. IE 9 +, Chrome и Firefox поддерживают SVG nativamente.
SVG используется для двумерных векторных графиков.
Если вы не уверены, подходит ли SVG для вас или вашего проекта, быстро просмотрите страницу примеров SVG, чтобы быстро понять возможности SVG.

Онлайн-редактор SVG - SVG можно редактировать онлайн, SVG можно конвертировать в исходный код SVG

Полный пример SVG　 - Основные примеры SVG, которые помогут вам быстро熟悉 SVG, и которые можно использовать в будущем в качестве быстрого справочника, здесь мы постараемся предоставить больше примеров SVG, чтобы вы могли быстро освоить использование SVG

SVG справочник - Собираем элементы, часто используемые в SVG, и методы использования свойств элементов

SVG используется для векторных графиков

Как формат векторных графиков, SVG наиболее полезен для векторных типов графиков, например:

1. Двумерные графические объекты в координатной системе X, Y

2. Гистограммы, диаграммы с кругом и т.д.

3. Масштабируемые иконки и логотипы для веба, планшетов и мобильных приложений, а также веб-приложений

4. Графики и чертежи архитектуры и дизайна

5. И так далее

Как формат «векторных графиков», формы, которые необходимо отображать, хранятся в векторной или подобной векторной структуре. Иными словами, как числа. Не в виде пикселей.

«Удаляемый» означает, что зритель может масштабировать SVG-изображение вверх и вниз без потери качества. Это возможно, потому что графика определена численно, а не в виде пикселей. Масштабирование SVG-изображения вверх или вниз означает только умножение или деление чисел, определяющих форму SVG.

Хотя можно嵌入 битмап-графики в SVG-изображения, SVG не является идеальным выбором для фотографий, фильмов и других битмап-графиков. Это удобный способ рисовать формы или текст на битмап-изображениях.

SVG идеально подходит для генерации изображений/графиков/диаграмм

SVG - это формат XML (текстовый формат), который легко генерировать из Servlet, JSP, ASP.NET, PHP и других технологий веб-приложений. Это делает SVG идеально подходящим для компьютерно-генерируемых графиков и диаграмм. Имеет интересное свойство, что в веб-приложениях обычно необходимо точно определить тип диаграммы (график, диаграмма и т.д.), которая наиболее подходит для SVG. Это делает SVG еще более подходящим для генерации графиков и диаграмм.

Написание скрипта SVG

SVG можно изменить с помощью JavaScript, чтобы изменить изображение, созданное в браузере. Таким образом, SVG можно использовать для более динамичных демонстраций, включая даже маленькие игры.

О данном учебнике

Цель этого учебника - помочь вам быстро освоить SVG и использовать его в будущем в качестве быстрого справочника. Будет предпринята попытка охватить как можно больше SVG, но не все аспекты спецификации SVG будут рассмотрены. После получения достаточного понимания основ, можно легко обращаться к спецификации SVG для более сложных или специальных тем.