Формат SVG
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки xml, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов.
SVG включает в себя несколько типов объектов:
- векторную графику (линии, окружности, кривые)
- текст (с форматированием, заданием стилей и эффектов)
- растровые изображения (внедряемые в SVG–документ).
Благодаря текстовой природе XML, SVG-файлы могут индексироваться поисковыми серверами, ключевые слова можно встраивать в сам SVG–документ. Таким образом вам не нужно создавать дополнительные метафайлы для поисковых серверов, как это делается в случае с Flash. Объектная модель SVG документа основана на принятом консорциумом W3C стандарте DOM (Document Object Model). SVG также может быть встроен в PDF документ.
Анимация реализована в SVG с помощью языка SMIL, разработанного также консорциумом W3C. Поддерживаются скриптовые языки (JavaScript) на основе спецификации ECMAScript. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение ее параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
Программы для работы
SVG является текстовым форматом, это значит, что редактировать векторные картинки можно даже в любом тестовом редакторе.
- Inkscape - в качестве основного формата в программе используется SVG.
- Adobe Edge предназначен для создания простого анимированного контента на открытых стандартах: Использование HTML 5, JavaScript, CSS3.
- Altova Altova XMLSpy — редактор xml
- BlueGriffon HTML, SVG редактор
- SVG-edit - Web- приложение SVG-Edit, которое распространяется в виде расширения для Firefox или виджета Opera и использует только JavaScript, HTML, Основы работы с CSS и SVG. Работает в офлайновом режиме и не требует подключения к Интернету. В SVG-Edit реализована поддержка растровых изображений, группировка элементов, масштабирование, слои, кривые, смена фона и многое другое.
JavaScript- библиотеки для работы с SVG:
- Библиотека Raphael. Язык разметки SVG в связке с SMIL. Онлайн редактор Графинг использует Raphael.
- SVGWeb
- Polymaps.js
- D3.js
Шаблон SVG
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <desc> <!-- put a description here --> </desc> <rect width="300" height="30" fill="blue"/> </svg>
Ссылки
📌 Для тестирования скриптов, установщиков VPN, Python ботов рекомендуем использовать надежные VPS на короткий срок. Если вам нужна помощь с более сложными задачами, вы можете найти фрилансера, который поможет с настройкой. Узнайте больше о быстрой аренде VPS для экспериментов и о фриланс-бирже для настройки VPS, WordPress. 📌
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!
7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Китайский VPN Shadowsocks простая установка и настройка
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах