Scalable Vector Graphics: відмінності між версіями
[перевірена версія] | [перевірена версія] |
Виправлено джерел: 1; позначено як недійсні: 0. #IABot (v2.0beta14) |
Немає опису редагування |
||
(Не показані 11 проміжних версій 10 користувачів) | |||
Рядок 3: | Рядок 3: | ||
| screenshot = |
| screenshot = |
||
| extension = <tt>.svg</tt>, <tt>.svgz</tt> |
| extension = <tt>.svg</tt>, <tt>.svgz</tt> |
||
| mime = image/svg+xml<ref> |
| mime = image/svg+xml<ref>{{Cite web |url=http://www.w3.org/TR/SVGMobile12/mimereg.html |title=M Media Type registration for image/svg+xml |accessdate=18 січня 2008 |archive-date=14 березня 2016 |archive-url=https://web.archive.org/web/20160314183016/http://www.w3.org/TR/SVGMobile12/mimereg.html }}</ref> |
||
| owner = [[World Wide Web Consortium]] |
| owner = [[World Wide Web Consortium]] |
||
| creatorcode = |
| creatorcode = |
||
| genre = [[векторна графіка|формат файлів векторної графіки]] |
| genre = [[векторна графіка|формат файлів векторної графіки]] |
||
| container for = |
| container for = |
||
| contained by = |
| contained by = |
||
| extended from = [[XML]] |
| extended from = [[XML]] |
||
| extended to = |
| extended to = |
||
}} |
}} |
||
'''Scalable Vector Graphics''' (скорочено SVG) (з англ. ''масштабована векторна графіка'') — специфікація [[мова розмітки даних|мови розмітки]], що базується на [[XML]], та [[формат файлів]] для |
'''Scalable Vector Graphics''' (скорочено SVG) (з англ. ''масштабована векторна графіка'') — специфікація [[мова розмітки даних|мови розмітки]], що базується на [[XML]], та [[формат файлів]] для двомірної векторної графіки, як статичної, так і [[Анімація|анімованої]] та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні лінки шляхом застосування простих [[XLink]]-ів.<ref>{{cite book |last=Watt |first=Andrew |coauthors=Chris Lilley, Daniel J. Ayers et al |title=SVG Unleashed |year=2003 |publisher=SAMS |location=Indianapolis |id=ISBN 0-672-32429-6 |page=P. 77 }}</ref> Ця специфікація є відкритим стандартом, розробленим робочою групою {{lang-en|[[SVG Working Group]]}} організації [[World Wide Web Consortium]]. |
||
== Історія розвитку == |
== Історія розвитку == |
||
SVG був розроблений робочою групою W3C SVG Working Group, починаючи від [[1998]], після того як [[Macromedia]] та [[Microsoft]] ввели [[Vector Markup Language]] (VML), і водночас [[Adobe Systems]] та [[Sun Microsystems]] представили конкуруючий формат [[PGML]]. Робочу групу очолив Chris Lilley з W3C. |
SVG був розроблений робочою групою W3C SVG Working Group, починаючи від [[1998]], після того як [[Macromedia]] та [[Microsoft]] ввели [[Vector Markup Language]] (VML), і водночас [[Adobe Systems]] та [[Sun Microsystems]] представили конкуруючий формат [[PGML]]. Робочу групу очолив Chris Lilley з W3C. |
||
* SVG 1.0 набув статусу рекомендації W3C 4 вересня 2001.<ref>W3C Recommendation, ''[http://www.w3.org/TR/SVG10/ SVG 1.0 Specification]'' (2001-09-04)</ref> |
* SVG 1.0 набув статусу рекомендації W3C 4 вересня 2001.<ref>W3C Recommendation, ''[http://www.w3.org/TR/SVG10/ SVG 1.0 Specification] {{Webarchive|url=https://web.archive.org/web/20080511173619/http://www.w3.org/TR/SVG10/ |date=11 травня 2008 }}'' (2001-09-04)</ref> |
||
* SVG 1.1 став рекомендацією W3C 14 січня 2003.<ref>W3C Recommendation, ''[http://www.w3.org/TR/SVG11/ SVG 1.1 Specification]'' (2003-01-14)</ref> Специфікація SVG 1.1 має модульну структуру, щоб дозволити реалізовувати підмножину формату в профілях. Крім |
* SVG 1.1 став рекомендацією W3C 14 січня 2003.<ref>W3C Recommendation, ''[http://www.w3.org/TR/SVG11/ SVG 1.1 Specification] {{Webarchive|url=https://web.archive.org/web/20120916044214/http://www.w3.org/TR/SVG11/ |date=16 вересня 2012 }}'' (2003-01-14)</ref> Специфікація SVG 1.1 має модульну структуру, щоб дозволити реалізовувати підмножину формату в профілях. Крім цього, між SVG 1.1 та SVG 1.0 дуже мало відмінностей. |
||
** SVG Tiny та SVG Basic (Мобільний профіль SVG) стали рекомендацією W3C водночас, 14 січня 2003. Вони описані як профілі SVG 1.1. |
** SVG Tiny та SVG Basic (Мобільний профіль SVG) стали рекомендацією W3C водночас, 14 січня 2003. Вони описані як профілі SVG 1.1. |
||
* SVG Tiny 1.2 став кандидатом в рекомендації W3C 10 серпня 2006.<ref>W3C Candidate Recommendation, ''[http://www.w3.org/TR/2006/CR-SVGMobile12-20060810/ SVG Tiny 1.2 Specification]'' (2006-08-10)</ref><ref> |
* SVG Tiny 1.2 став кандидатом в рекомендації W3C 10 серпня 2006.<ref>W3C Candidate Recommendation, ''[http://www.w3.org/TR/2006/CR-SVGMobile12-20060810/ SVG Tiny 1.2 Specification] {{Webarchive|url=https://web.archive.org/web/20080418013301/http://www.w3.org/TR/2006/CR-SVGMobile12-20060810/ |date=18 квітня 2008 }}'' (2006-08-10)</ref><ref>{{Cite web |url=http://lists.w3.org/Archives/Public/www-svg/2006Aug/0036.html |title=SVG Tiny 1.2 is now a Candidate Recommendation |accessdate=25 квітня 2008 |archive-date=24 червня 2008 |archive-url=https://web.archive.org/web/20080624165720/http://lists.w3.org/Archives/Public/www-svg/2006Aug/0036.html }}</ref>, і офіційною рекомендацією W3C — 22 грудня 2008<ref>{{Cite web |url=http://www.w3.org/News/2008.html#entry-6720 |title=SVG Tiny 1.2 Advances State of the Art for Web Graphics |accessdate=7 січня 2010 |archive-date=4 січня 2010 |archive-url=https://web.archive.org/web/20100104105312/http://www.w3.org/News/2008.html#entry-6720 }}</ref>. SVG Full 1.2 є робочим нарисом (W3C Working Draft). SVG Tiny 1.2 спочатку був випущений як профіль, але пізніше перероблений у повноцінну специфікацію, включаючи всі необхідні частини від SVG 1.1 та SVG 1.2. SVG 1.2 Full додає модулі всередину ядра SVGT 1.2. |
||
* SVG Print додає багатосторінкові документи і обов'язкову підтримку управління кольорами. |
* SVG Print додає багатосторінкові документи і обов'язкову підтримку управління кольорами. |
||
Рядок 35: | Рядок 35: | ||
|url=http://www.msnbc.msn.com/id/26646919/ |
|url=http://www.msnbc.msn.com/id/26646919/ |
||
|title=Creator of Web spots a flaw in Internet Explorer |
|title=Creator of Web spots a flaw in Internet Explorer |
||
|last=Svensson|first=Peter |
|last=Svensson |
||
|first=Peter |
|||
|date=2008-09-10 |
|date=2008-09-10 |
||
|publisher=[[Associated Press]], [[msnbc.com]] |
|publisher=[[Associated Press]], [[msnbc.com]] |
||
| |
|language=en |
||
|accessdate=2009-11-30 |
|accessdate=2009-11-30 |
||
|description=О бета‐версии IE8 |
|||
⚫ | |||
|archive-date=25 серпня 2011 |
|||
|archive-url=https://www.webcitation.org/61BqP8iOj?url=http://www.msnbc.msn.com/id/26646919/ |
|||
⚫ | }}</ref>, вбудована підтримка з'явилась лише в IE9 beta<ref>{{Cite web |url=http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx |title=HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers |accessdate=17 березня 2010 |archive-date=22 березня 2010 |archive-url=https://web.archive.org/web/20100322204435/http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx }}</ref><ref>{{Cite web |url=http://arstechnica.com/microsoft/news/2010/03/platform-preview-gives-web-developers-first-taste-of-ie9.ars |title=Platform Preview gives Web developers first taste of IE9 |accessdate=17 березня 2010 |archive-date=22 березня 2010 |archive-url=https://web.archive.org/web/20100322191403/http://arstechnica.com/microsoft/news/2010/03/platform-preview-gives-web-developers-first-taste-of-ie9.ars }}</ref> |
||
|- |
|- |
||
! style="text-align:left;" | [[Mozilla Firefox]] |
! style="text-align:left;" | [[Mozilla Firefox]] |
||
Рядок 73: | Рядок 77: | ||
| так |
| так |
||
|} |
|} |
||
[[Microsoft]] приєдналася до W3C SVG Working Group на початку 2010 року<ref> |
[[Microsoft]] приєдналася до W3C SVG Working Group на початку 2010 року<ref>{{Cite web |url=http://blogs.msdn.com/ie/archive/2010/01/05/microsoft-joins-w3c-svg-working-group.aspx |title=Microsoft Joins W3C SVG Working Group |accessdate=7 січня 2010 |archive-date=8 січня 2010 |archive-url=https://web.archive.org/web/20100108081123/http://blogs.msdn.com/ie/archive/2010/01/05/microsoft-joins-w3c-svg-working-group.aspx }}</ref>, після тривалих вагань стосовно власницьких рішень і конкуруючих рішень в царині вебграфіки. |
||
== Властивості |
== Властивості та переваги формату == |
||
[[Файл:Bitmap_VS_SVG.svg|thumb|Малюнок демонструє відмінність між растровою та векторною графіками. Растрове зображення утворене з окремих крапок-[[піксел]]ів, в той час як векторне зображення утворене з комбінації форм. При збільшенні або деформації пікселі растрового зображення стають помітні, тоді як векторний малюнок зберігає форму]] |
[[Файл:Bitmap_VS_SVG.svg|thumb|Малюнок демонструє відмінність між растровою та векторною графіками. Растрове зображення утворене з окремих крапок-[[піксел]]ів, в той час як векторне зображення утворене з комбінації форм. При збільшенні або деформації пікселі растрового зображення стають помітні, тоді як векторний малюнок зберігає форму]] |
||
* Текстовий формат |
* Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів. Працювати з SVG без засобів візуального програмування не складніше ніж з [[HTML]]. При прогляданні документів SVG, що містять графіку, є доступ до проглядання коду файлу, що проглядається, і можливість збереження всього документу. Крім того, SVG файли зазвичай виходять меншими за розміром, ніж порівнянні за якістю зображення у форматах [[JPEG]] або [[GIF]], а також добре піддаються стисненню. |
||
* Масштабованість |
* Масштабованість — SVG є векторним форматом. Існує можливість збільшити будь-яку частину зображення SVG без втрати якості. Додатково, до елементів SVG документу можливо застосовувати фільтри — спеціальні модифікатори для створення ефектів, подібних вживаним при обробці растрових зображень (розмиття, витискування, складні системи трансформації тощо). В тексті SVG-коду фільтри описуються тегами, візуалізацію яких забезпечує засіб перегляду, що не впливає на розмір початкового файлу, забезпечуючи при цьому необхідну ілюстративну виразність. |
||
* Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти елементи із зображеннями у форматах [[PNG]], [[GIF]] або [[JPG]]. |
* Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти елементи із зображеннями у форматах [[PNG]], [[GIF]] або [[JPG]]. |
||
* Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексується пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів. |
* Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексується пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів. |
||
* [[Анімація]] реалізована в SVG за допомогою мови [[SMIL]] (Synchronized Multimedia Integration Language), розробленої також консорціумом [[W3C]]. Підтримуються [[скриптові мови]] на основі специфікації [[ECMAScript]]. SVG-елементами можна керувати за допомогою [[JavaScript]]. [[Застосування]] скриптів і анімації в SVG дозволяє створювати динамічну і інтерактивну графіку. У SVG забезпечується подієва модель, відстежуються події (завантаження сторінки, зміна її параметрів, події миші, клавіатури тощо). Анімація може запускатися по певній події (наприклад «onmouseover» або «onclick»), що додає графіці інтерактивність. У кожного елементу є свої власні події, до яких можна прив'язувати окремі скрипти. |
* [[Анімація]] реалізована в SVG за допомогою мови [[SMIL]] (Synchronized Multimedia Integration Language), розробленої також консорціумом [[W3C]]. Підтримуються [[скриптові мови]] на основі специфікації [[ECMAScript]]. SVG-елементами можна керувати за допомогою [[JavaScript]]. [[Застосування]] скриптів і анімації в SVG дозволяє створювати динамічну і інтерактивну графіку. У SVG забезпечується подієва модель, відстежуються події (завантаження сторінки, зміна її параметрів, події миші, клавіатури тощо). Анімація може запускатися по певній події (наприклад «onmouseover» або «onclick»), що додає графіці інтерактивність. У кожного елементу є свої власні події, до яких можна прив'язувати окремі скрипти. |
||
* SVG |
* SVG — відкритий [[стандарт]]. На відміну від деяких інших форматів, SVG не є чиєюсь власністю. |
||
* SVG документи легко інтегруються з [[HTML]] і [[XHTML]] документами. Зовнішні SVG підключаються через тег <embed>, значення атрибуту src ім'я файлу з розширенням «.svg», що містить розмітку SVG. Атрибути width і height визначають розміри області SVG по горизонталі і по вертикалі. Елементи SVG сумісні з [[HTML]] і [[DHTML]]. |
* SVG документи легко інтегруються з [[HTML]] і [[XHTML]] документами. Зовнішні SVG підключаються через тег <embed>, значення атрибуту src ім'я файлу з розширенням «.svg», що містить розмітку SVG. Атрибути width і height визначають розміри області SVG по горизонталі і по вертикалі. Елементи SVG сумісні з [[HTML]] і [[DHTML]]. |
||
* Сумісність з [[CSS]] ({{lang-en|Cascading Style Sheets}}). Відображенням (форматуванням і декоруванням) SVG елементів можна управляти за допомогою таблиці стилів CSS 2.0 і її розширень, або безпосередньо за допомогою атрибутів SVG елементів. |
* Сумісність з [[CSS]] ({{lang-en|Cascading Style Sheets}}). Відображенням (форматуванням і декоруванням) SVG елементів можна управляти за допомогою таблиці стилів CSS 2.0 і її розширень, або безпосередньо за допомогою атрибутів SVG елементів. |
||
Рядок 90: | Рядок 94: | ||
* Інтернаціоналізація (підтримка [[Юнікод]]у). |
* Інтернаціоналізація (підтримка [[Юнікод]]у). |
||
* Широка доступність для різних застосувань. |
* Широка доступність для різних застосувань. |
||
* Легка модифікація через стандартні [[API]] |
* Легка модифікація через стандартні [[API]] — наприклад, [[DOM]]. SVG підтримує стандартизовану W3C об'єктну модель документу DOM, забезпечуючи доступ до будь-якого елементу, що дає широкі можливості з динамічної модифікації елементів, їхніх атрибутів і подій. |
||
* Легке перетворення таблицями стилів [[XSLT]]. Як будь-який заснований на [[XML]] формат, SVG дає можливість використовувати для його обробки таблиці трансформації (XSLT). Перетворюючи XML-дані в SVG за допомогою простого XSL, можна легко отримати графічне представлення будь-яких даних, наприклад візуалізувати хімічні молекули, описаних на мові CML (Chemical Markup Language). |
* Легке перетворення таблицями стилів [[XSLT]]. Як будь-який заснований на [[XML]] формат, SVG дає можливість використовувати для його обробки таблиці трансформації (XSLT). Перетворюючи XML-дані в SVG за допомогою простого XSL, можна легко отримати графічне представлення будь-яких даних, наприклад візуалізувати хімічні молекули, описаних на мові CML (Chemical Markup Language). |
||
== Структура SVG документа == |
== Структура SVG документа == |
||
Перший рядок |
Перший рядок — стандартний заголовок XML, оголошення ({{lang-en|XML declaration}}), який вказує версію XML (version) (зазвичай «1.0») і кодування символів (encoding) (бажано використовувати [[Юнікод]] кодування [[UTF-8]] або [[UTF-16]], але інші так само допустимі, наприклад, [[Windows-1251]] і [[KOI-8]]): |
||
< |
<syntaxhighlight lang="xml"><?xml version="1.0" encoding="UTF-8"?></syntaxhighlight> |
||
У другому і третьому рядках повинен розташовуватися заголовок DOCTYPE, що визначає тип документа (Document Type Definitions) [[DTD]]: |
У другому і третьому рядках повинен розташовуватися заголовок DOCTYPE, що визначає тип документа (Document Type Definitions) [[DTD]]: |
||
< |
<syntaxhighlight lang="xml"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"></ |
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"></syntaxhighlight> |
||
На жаль, в деяких випадках при застосуванні [[Mozilla Firefox]] з вбудованим переглядачем SVG, зміст оголошення DOCTYPE може бути джерелом помилок. Є рекомендації не використовувати декларацію DOCTYPE в SVG версій 1.0 і 1.1. Натомість рекомендовано включати атрибут baseProfile в кореневий елемент <svg> |
На жаль, в деяких випадках при застосуванні [[Mozilla Firefox]] з вбудованим переглядачем SVG, зміст оголошення DOCTYPE може бути джерелом помилок. Є рекомендації не використовувати декларацію DOCTYPE в SVG версій 1.0 і 1.1. Натомість рекомендовано включати атрибут baseProfile в кореневий елемент <svg> зі значенням «full»<ref>[http://jwatt.org/svg/authoring/#doctype-declaration SVG Authoring Guidelines: Don't include a DOCTYPE declaration] {{Webarchive|url=https://web.archive.org/web/20080414231446/http://jwatt.org/svg/authoring/#doctype-declaration |date=14 квітня 2008 }}{{ref-en}}</ref>. Якщо з якихось причин декларація DOCTYPE в документі необхідна, рекомендовано використовувати порожню декларацію, як в прикладі. |
||
< |
<syntaxhighlight lang="xml"> |
||
<!DOCTYPE svg [ |
<!DOCTYPE svg [ |
||
<!-- ваші дані --> ]> |
<!-- ваші дані --> ]> |
||
</syntaxhighlight> |
|||
</source> |
|||
У четвертому рядку, розміщується кореневий елемент документа з вказівкою простору імен SVG |
У четвертому рядку, розміщується кореневий елемент документа з вказівкою простору імен SVG |
||
< |
<syntaxhighlight lang="xml"> |
||
<svg version = "1.1" |
<svg version = "1.1" |
||
baseProfile="full" |
baseProfile="full" |
||
Рядок 115: | Рядок 119: | ||
height = "100%" width = "100%"> |
height = "100%" width = "100%"> |
||
</svg> |
</svg> |
||
</syntaxhighlight> |
|||
</source> |
|||
Далі йде решта тексту документа, вкладена в кореневий елемент, де власне розташовуються елементи, що описують зміст кодованої сцени. Завершується документ завжди закриттям кореневого |
Далі йде решта тексту документа, вкладена в кореневий елемент, де власне розташовуються елементи, що описують зміст кодованої сцени. Завершується документ завжди закриттям кореневого тегу '''</svg>'''. |
||
=== Приклад === |
=== Приклад === |
||
[[Файл:Svg-example.svg|thumb |
[[Файл:Svg-example.svg|thumb]] |
||
Простий статичний документ SVG (містить: контур [[квадрат]]а розміром 400 [[піксел]]ів і три напівпрозорі [[коло|кола]] [[радіус]]ом 100 пікселів, по центру квадрата, кожне коло зміщується від центру квадрата приблизно на пів радіусу). |
Простий статичний документ SVG (містить: контур [[квадрат]]а розміром 400 [[піксел]]ів і три напівпрозорі [[коло|кола]] [[радіус]]ом 100 пікселів, по центру квадрата, кожне коло зміщується від центру квадрата приблизно на пів радіусу). |
||
Для відображення малюнку потрібний браузер з вбудованим переглядом формату чи зі встановленим плагіном. |
Для відображення малюнку потрібний браузер з вбудованим переглядом формату чи зі встановленим плагіном. |
||
< |
<syntaxhighlight lang="xml"> |
||
<?xml version="1.0" encoding="utf-8" standalone="yes"?> |
<?xml version="1.0" encoding="utf-8" standalone="yes"?> |
||
<svg version = "1.1" |
<svg version = "1.1" |
||
Рядок 138: | Рядок 142: | ||
</g> |
</g> |
||
</svg> |
</svg> |
||
</syntaxhighlight> |
|||
</source> |
|||
[[ |
[[Файл:Пример чертежа в SVG формате.svg|300px|right|thumb|Кресленик виконано в КОМПАС-Графік та експортовано у SVG формат]] |
||
== Стиснення SVGZ == |
== Стиснення SVGZ == |
||
Оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують в [[gzip]], а отриманому архіву зазвичай надають розширення «SVGZ». |
Оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують в [[gzip]], а отриманому архіву зазвичай надають розширення «SVGZ». |
||
SVG добре стискається<ref> |
SVG добре стискається<ref>{{Cite web |url=http://www.w3.org/TR/2003/REC-SVG11-20030114/minimize.html |title=Minimizing SVG File Sizes - SVG 1.1 Specification |accessdate=21 серпня 2011 |archive-date=30 вересня 2011 |archive-url=https://web.archive.org/web/20110930010029/http://www.w3.org/TR/2003/REC-SVG11-20030114/minimize.html }}</ref>, оскільки це текстовий XML-документ, що має регулярну структуру. |
||
== Специфікації стандарту == |
== Специфікації стандарту == |
||
* [http://www.w3.org/TR/SVG12/ SVG 1.2 (попередній)] |
* [http://www.w3.org/TR/SVG12/ SVG 1.2 (попередній)] {{Webarchive|url=https://web.archive.org/web/20080405171950/http://www.w3.org/TR/SVG12/ |date=5 квітня 2008 }} |
||
* [http://www.w3.org/TR/SVG11/ SVG 1.1] |
* [http://www.w3.org/TR/SVG11/ SVG 1.1] {{Webarchive|url=https://web.archive.org/web/20120916044214/http://www.w3.org/TR/SVG11/ |date=16 вересня 2012 }} |
||
* [http://www.w3.org/TR/SVGMobile12/ SVG мобільний 1.2 (попередній)] |
* [http://www.w3.org/TR/SVGMobile12/ SVG мобільний 1.2 (попередній)] {{Webarchive|url=https://web.archive.org/web/20080112192403/http://www.w3.org/TR/SVGMobile12/ |date=12 січня 2008 }} |
||
* [http://www.w3.org/TR/SVGMobile/ SVG мобільний] |
* [http://www.w3.org/TR/SVGMobile/ SVG мобільний] {{Webarchive|url=https://web.archive.org/web/20080418002408/http://www.w3.org/TR/SVGMobile/ |date=18 квітня 2008 }} |
||
* [http://www.w3.org/TR/SVGPrint/ SVG друк] |
* [http://www.w3.org/TR/SVGPrint/ SVG друк] {{Webarchive|url=https://web.archive.org/web/20080418111505/http://www.w3.org/TR/SVGPrint/ |date=18 квітня 2008 }} |
||
* [http://www.w3.org/TR/SVG2Reqs/ SVG вимоги (попередній)] |
* [http://www.w3.org/TR/SVG2Reqs/ SVG вимоги (попередній)] {{Webarchive|url=https://web.archive.org/web/20080418111301/http://www.w3.org/TR/SVG2Reqs/ |date=18 квітня 2008 }} |
||
Рядок 159: | Рядок 163: | ||
== Посилання == |
== Посилання == |
||
* [http://www.w3.org/Graphics/SVG/ Офіційний сайт SVG]{{ref-en}} |
* [http://www.w3.org/Graphics/SVG/ Офіційний сайт SVG] {{Webarchive|url=https://web.archive.org/web/20160819011224/http://www.w3.org/Graphics/SVG/ |date=19 серпня 2016 }}{{ref-en}} |
||
* [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html Офіційний пакет прикладів SVG і їх реалізацій у сучасних браузерів]{{ref-en}} |
* [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html Офіційний пакет прикладів SVG і їх реалізацій у сучасних браузерів] {{Webarchive|url=https://web.archive.org/web/20110811202921/http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html |date=11 серпня 2011 }}{{ref-en}} |
||
* [http://www.svg.org/ Спільнота користувачів, розробників та ентузіастів SVG] |
* [http://www.svg.org/ Спільнота користувачів, розробників та ентузіастів SVG] {{Webarchive|url=https://web.archive.org/web/20080423030427/http://www.svg.org/ |date=23 квітня 2008 }} |
||
* [http://www.intuit.ru/department/graphics/svg/ Підручник з SVG-графіки]{{ref-ru}} |
* [http://www.intuit.ru/department/graphics/svg/ Підручник з SVG-графіки] {{Webarchive|url=https://web.archive.org/web/20100813122115/http://www.intuit.ru/department/graphics/svg/ |date=13 серпня 2010 }}{{ref-ru}} |
||
* [https://web.archive.org/web/20060712105106/http://wiki.svg.org/Main_Page wiki] {{ref-en}} |
* [https://web.archive.org/web/20060712105106/http://wiki.svg.org/Main_Page wiki] {{ref-en}} |
||
* [http://www.opera.com/docs/specs/svg/ Список] елементів SVG, що підтримує [[браузер]] [[Opera]] |
* [http://www.opera.com/docs/specs/svg/ Список] {{Webarchive|url=https://web.archive.org/web/20080516025242/http://www.opera.com/docs/specs/svg/ |date=16 травня 2008 }} елементів SVG, що підтримує [[браузер]] [[Opera]] |
||
* [https://web.archive.org/web/20081217072434/http://dev.opera.com/articles/svg/ Статті про можливості SVG від розробників Опери] |
* [https://web.archive.org/web/20081217072434/http://dev.opera.com/articles/svg/ Статті про можливості SVG від розробників Опери] |
||
* [https://web.archive.org/web/20060702060110/http://www.mozilla.org/projects/svg/faq.html FAQ]{{ref-en}} Про реалізацію SVG в [[браузер]]і [[Mozilla Firefox]] |
* [https://web.archive.org/web/20060702060110/http://www.mozilla.org/projects/svg/faq.html FAQ]{{ref-en}} Про реалізацію SVG в [[браузер]]і [[Mozilla Firefox]] |
||
* [http://graphing.ru/i/svg-examples/ Приклади]{{ref-ru}} використання формата SVG |
* [http://graphing.ru/i/svg-examples/ Приклади] {{Webarchive|url=https://web.archive.org/web/20140429170445/http://graphing.ru/i/svg-examples/ |date=29 квітня 2014 }}{{ref-ru}} використання формата SVG |
||
* [http://www.adobe.com/svg/main.html Сторінка]{{ref-en}} формату SVG на сайті [[Adobe]] |
* [http://www.adobe.com/svg/main.html Сторінка] {{Webarchive|url=https://web.archive.org/web/20080516071402/http://www.adobe.com/svg/main.html |date=16 травня 2008 }}{{ref-en}} формату SVG на сайті [[Adobe]] |
||
* [http://xml.nsu.ru/extra/svgintro_0.xml Школи консорціуму W3C. Введення в SVG] {{ref-ru}} |
* [http://xml.nsu.ru/extra/svgintro_0.xml Школи консорціуму W3C. Введення в SVG] {{Webarchive|url=https://web.archive.org/web/20080430122340/http://www.xml.nsu.ru/extra/svgintro_0.xml |date=30 квітня 2008 }} {{ref-ru}} |
||
* [http://v.sytnik.lviv.ua/ru/tags/svg-0/ Опис креслень у форматі SVG (v.sytnik.lviv.ua)] {{ref-ru}} |
* [http://v.sytnik.lviv.ua/ru/tags/svg-0/ Опис креслень у форматі SVG (v.sytnik.lviv.ua)] {{Webarchive|url=https://web.archive.org/web/20130926074905/http://v.sytnik.lviv.ua/ru/tags/svg-0/ |date=26 вересня 2013 }} {{ref-ru}} |
||
=== Бібліотеки === |
=== Бібліотеки === |
||
Рядок 176: | Рядок 180: | ||
=== Програмне забезпечення === |
=== Програмне забезпечення === |
||
* [http://www.adobe.com/svg/viewer/install/ Adobe SVG Viewer], зокрема і плагін для підтримки формату в IE6. |
* [http://www.adobe.com/svg/viewer/install/ Adobe SVG Viewer] {{Webarchive|url=https://web.archive.org/web/20060117182359/http://www.adobe.com/svg/viewer/install/ |date=17 січня 2006 }}, зокрема і плагін для підтримки формату в IE6. |
||
* [https://web.archive.org/web/20090228054847/http://www.examotion.com/index.php?id=product_player Renesis Player], [[плагін]] для [[Internet Explorer]], Windows File Explorer та окремий власне плеєр. |
* [https://web.archive.org/web/20090228054847/http://www.examotion.com/index.php?id=product_player Renesis Player], [[плагін]] для [[Internet Explorer]], Windows File Explorer та окремий власне плеєр. |
||
* [http://www.inkscape.org Сайт] [[Inkscape]] ([[вільне програмне забезпечення|вільний]] векторний графічний пакет для роботи з SVG). |
* [http://www.inkscape.org Сайт] {{Webarchive|url=https://web.archive.org/web/20201004151942/https://inkscape.org/ |date=4 жовтня 2020 }} [[Inkscape]] ([[вільне програмне забезпечення|вільний]] векторний графічний пакет для роботи з SVG). |
||
== |
== Див. також == |
||
* [[Векторна графіка|Векторна]] та [[растрова графіка]] |
* [[Векторна графіка|Векторна]] та [[растрова графіка]] |
||
* [[XML]] |
* [[XML]] |
||
* [[Порівняння програмного забезпечення для перетворення растрових зображень у векторні]] |
|||
{{Графічні формати файлів}} |
{{Графічні формати файлів}} |
||
[[Категорія:Комп'ютерна графіка]] |
[[Категорія:Комп'ютерна графіка]] |
||
[[Категорія: |
[[Категорія:Векторні формати файлів]] |
||
[[Категорія:XML]] |
[[Категорія:XML]] |
||
[[Категорія: |
[[Категорія:Вебтехнології]] |
||
[[Категорія:Стандарти W3C]] |
[[Категорія:Стандарти W3C]] |
||
[[Категорія:Відкриті формати]] |
[[Категорія:Відкриті формати]] |
||
[[Категорія:Статті з прикладами коду мовою XML]] |
Поточна версія на 12:19, 30 травня 2023
Розширення файлу: | ..svg, .svgz |
---|---|
MIME-тип: | image/svg+xml[1] |
Розробник: | World Wide Web Consortium |
Тип формату: | формат файлів векторної графіки |
Розширений з: | XML |
Scalable Vector Graphics (скорочено SVG) (з англ. масштабована векторна графіка) — специфікація мови розмітки, що базується на XML, та формат файлів для двомірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні лінки шляхом застосування простих XLink-ів.[2] Ця специфікація є відкритим стандартом, розробленим робочою групою англ. SVG Working Group організації World Wide Web Consortium.
SVG був розроблений робочою групою W3C SVG Working Group, починаючи від 1998, після того як Macromedia та Microsoft ввели Vector Markup Language (VML), і водночас Adobe Systems та Sun Microsystems представили конкуруючий формат PGML. Робочу групу очолив Chris Lilley з W3C.
- SVG 1.0 набув статусу рекомендації W3C 4 вересня 2001.[3]
- SVG 1.1 став рекомендацією W3C 14 січня 2003.[4] Специфікація SVG 1.1 має модульну структуру, щоб дозволити реалізовувати підмножину формату в профілях. Крім цього, між SVG 1.1 та SVG 1.0 дуже мало відмінностей.
- SVG Tiny та SVG Basic (Мобільний профіль SVG) стали рекомендацією W3C водночас, 14 січня 2003. Вони описані як профілі SVG 1.1.
- SVG Tiny 1.2 став кандидатом в рекомендації W3C 10 серпня 2006.[5][6], і офіційною рекомендацією W3C — 22 грудня 2008[7]. SVG Full 1.2 є робочим нарисом (W3C Working Draft). SVG Tiny 1.2 спочатку був випущений як профіль, але пізніше перероблений у повноцінну специфікацію, включаючи всі необхідні частини від SVG 1.1 та SVG 1.2. SVG 1.2 Full додає модулі всередину ядра SVGT 1.2.
- SVG Print додає багатосторінкові документи і обов'язкову підтримку управління кольорами.
Браузер | у версіі | підтримує |
---|---|---|
Internet Explorer | 8.0 | ні[8], вбудована підтримка з'явилась лише в IE9 beta[9][10] |
Mozilla Firefox | з 1.5[11] | так |
Netscape Navigator | 9.0 | так |
Google Chrome | 3.0 | так |
Safari | 4.0 | так |
Opera | з 8.0 | так |
Chromium | 6.0 | так |
Microsoft приєдналася до W3C SVG Working Group на початку 2010 року[12], після тривалих вагань стосовно власницьких рішень і конкуруючих рішень в царині вебграфіки.
- Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів. Працювати з SVG без засобів візуального програмування не складніше ніж з HTML. При прогляданні документів SVG, що містять графіку, є доступ до проглядання коду файлу, що проглядається, і можливість збереження всього документу. Крім того, SVG файли зазвичай виходять меншими за розміром, ніж порівнянні за якістю зображення у форматах JPEG або GIF, а також добре піддаються стисненню.
- Масштабованість — SVG є векторним форматом. Існує можливість збільшити будь-яку частину зображення SVG без втрати якості. Додатково, до елементів SVG документу можливо застосовувати фільтри — спеціальні модифікатори для створення ефектів, подібних вживаним при обробці растрових зображень (розмиття, витискування, складні системи трансформації тощо). В тексті SVG-коду фільтри описуються тегами, візуалізацію яких забезпечує засіб перегляду, що не впливає на розмір початкового файлу, забезпечуючи при цьому необхідну ілюстративну виразність.
- Широко доступне використання растрової графіки в SVG документах. Є можливість вставляти елементи із зображеннями у форматах PNG, GIF або JPG.
- Текст в графіці SVG є текстом, а не зображенням, тому його можна виділяти і копіювати, він індексується пошуковими машинами, не потрібно створювати додаткові метафайли для пошукових серверів.
- Анімація реалізована в SVG за допомогою мови SMIL (Synchronized Multimedia Integration Language), розробленої також консорціумом W3C. Підтримуються скриптові мови на основі специфікації ECMAScript. SVG-елементами можна керувати за допомогою JavaScript. Застосування скриптів і анімації в SVG дозволяє створювати динамічну і інтерактивну графіку. У SVG забезпечується подієва модель, відстежуються події (завантаження сторінки, зміна її параметрів, події миші, клавіатури тощо). Анімація може запускатися по певній події (наприклад «onmouseover» або «onclick»), що додає графіці інтерактивність. У кожного елементу є свої власні події, до яких можна прив'язувати окремі скрипти.
- SVG — відкритий стандарт. На відміну від деяких інших форматів, SVG не є чиєюсь власністю.
- SVG документи легко інтегруються з HTML і XHTML документами. Зовнішні SVG підключаються через тег <embed>, значення атрибуту src ім'я файлу з розширенням «.svg», що містить розмітку SVG. Атрибути width і height визначають розміри області SVG по горизонталі і по вертикалі. Елементи SVG сумісні з HTML і DHTML.
- Сумісність з CSS (англ. Cascading Style Sheets). Відображенням (форматуванням і декоруванням) SVG елементів можна управляти за допомогою таблиці стилів CSS 2.0 і її розширень, або безпосередньо за допомогою атрибутів SVG елементів.
SVG надає всі переваги XML:
- Можливість роботи в різних середовищах.
- Інтернаціоналізація (підтримка Юнікоду).
- Широка доступність для різних застосувань.
- Легка модифікація через стандартні API — наприклад, DOM. SVG підтримує стандартизовану W3C об'єктну модель документу DOM, забезпечуючи доступ до будь-якого елементу, що дає широкі можливості з динамічної модифікації елементів, їхніх атрибутів і подій.
- Легке перетворення таблицями стилів XSLT. Як будь-який заснований на XML формат, SVG дає можливість використовувати для його обробки таблиці трансформації (XSLT). Перетворюючи XML-дані в SVG за допомогою простого XSL, можна легко отримати графічне представлення будь-яких даних, наприклад візуалізувати хімічні молекули, описаних на мові CML (Chemical Markup Language).
Перший рядок — стандартний заголовок XML, оголошення (англ. XML declaration), який вказує версію XML (version) (зазвичай «1.0») і кодування символів (encoding) (бажано використовувати Юнікод кодування UTF-8 або UTF-16, але інші так само допустимі, наприклад, Windows-1251 і KOI-8):
<?xml version="1.0" encoding="UTF-8"?>
У другому і третьому рядках повинен розташовуватися заголовок DOCTYPE, що визначає тип документа (Document Type Definitions) DTD:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
На жаль, в деяких випадках при застосуванні Mozilla Firefox з вбудованим переглядачем SVG, зміст оголошення DOCTYPE може бути джерелом помилок. Є рекомендації не використовувати декларацію DOCTYPE в SVG версій 1.0 і 1.1. Натомість рекомендовано включати атрибут baseProfile в кореневий елемент <svg> зі значенням «full»[13]. Якщо з якихось причин декларація DOCTYPE в документі необхідна, рекомендовано використовувати порожню декларацію, як в прикладі.
<!DOCTYPE svg [
<!-- ваші дані --> ]>
У четвертому рядку, розміщується кореневий елемент документа з вказівкою простору імен SVG
<svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
height = "100%" width = "100%">
</svg>
Далі йде решта тексту документа, вкладена в кореневий елемент, де власне розташовуються елементи, що описують зміст кодованої сцени. Завершується документ завжди закриттям кореневого тегу </svg>.
Простий статичний документ SVG (містить: контур квадрата розміром 400 пікселів і три напівпрозорі кола радіусом 100 пікселів, по центру квадрата, кожне коло зміщується від центру квадрата приблизно на пів радіусу).
Для відображення малюнку потрібний браузер з вбудованим переглядом формату чи зі встановленим плагіном.
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
height = "400px" width = "400px">
<rect x="0" y="0" width="400" height="400" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
<g fill-opacity="0.7" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="100px" fill="red" transform="translate( 0,-50)" />
<circle cx="200px" cy="200px" r="100px" fill="blue" transform="translate( 70, 50)" />
<circle cx="200px" cy="200px" r="100px" fill="green" transform="translate(-70, 50)" />
</g>
</svg>
Оскільки код SVG займає досить багато місця, була створена «обгортка» SVGZ, коли файл SVG упаковують в gzip, а отриманому архіву зазвичай надають розширення «SVGZ».
SVG добре стискається[14], оскільки це текстовий XML-документ, що має регулярну структуру.
- SVG 1.2 (попередній) [Архівовано 5 квітня 2008 у Wayback Machine.]
- SVG 1.1 [Архівовано 16 вересня 2012 у Wayback Machine.]
- SVG мобільний 1.2 (попередній) [Архівовано 12 січня 2008 у Wayback Machine.]
- SVG мобільний [Архівовано 18 квітня 2008 у Wayback Machine.]
- SVG друк [Архівовано 18 квітня 2008 у Wayback Machine.]
- SVG вимоги (попередній) [Архівовано 18 квітня 2008 у Wayback Machine.]
- ↑ M Media Type registration for image/svg+xml. Архів оригіналу за 14 березня 2016. Процитовано 18 січня 2008.
- ↑ Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003). SVG Unleashed. Indianapolis: SAMS. с. P. 77. ISBN 0-672-32429-6.
{{cite book}}
:|page=
має зайвий текст (довідка) - ↑ W3C Recommendation, SVG 1.0 Specification [Архівовано 11 травня 2008 у Wayback Machine.] (2001-09-04)
- ↑ W3C Recommendation, SVG 1.1 Specification [Архівовано 16 вересня 2012 у Wayback Machine.] (2003-01-14)
- ↑ W3C Candidate Recommendation, SVG Tiny 1.2 Specification [Архівовано 18 квітня 2008 у Wayback Machine.] (2006-08-10)
- ↑ SVG Tiny 1.2 is now a Candidate Recommendation. Архів оригіналу за 24 червня 2008. Процитовано 25 квітня 2008.
- ↑ SVG Tiny 1.2 Advances State of the Art for Web Graphics. Архів оригіналу за 4 січня 2010. Процитовано 7 січня 2010.
- ↑ Svensson, Peter (10 вересня 2008). Creator of Web spots a flaw in Internet Explorer (англ.). Associated Press, msnbc.com. Архів оригіналу за 25 серпня 2011. Процитовано 30 листопада 2009.
{{cite news}}
: Проігноровано невідомий параметр|description=
(довідка) - ↑ HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers. Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010.
- ↑ Platform Preview gives Web developers first taste of IE9. Архів оригіналу за 22 березня 2010. Процитовано 17 березня 2010.
- ↑ Brockmeier, Joe (30 листопада 2005). Review: Firefox 1.5 and Thunderbird 1.5. Linux.com (англ.). Процитовано 30 листопада 2009.
- ↑ Microsoft Joins W3C SVG Working Group. Архів оригіналу за 8 січня 2010. Процитовано 7 січня 2010.
- ↑ SVG Authoring Guidelines: Don't include a DOCTYPE declaration [Архівовано 14 квітня 2008 у Wayback Machine.](англ.)
- ↑ Minimizing SVG File Sizes - SVG 1.1 Specification. Архів оригіналу за 30 вересня 2011. Процитовано 21 серпня 2011.
- Офіційний сайт SVG [Архівовано 19 серпня 2016 у Wayback Machine.](англ.)
- Офіційний пакет прикладів SVG і їх реалізацій у сучасних браузерів [Архівовано 11 серпня 2011 у Wayback Machine.](англ.)
- Спільнота користувачів, розробників та ентузіастів SVG [Архівовано 23 квітня 2008 у Wayback Machine.]
- Підручник з SVG-графіки [Архівовано 13 серпня 2010 у Wayback Machine.](рос.)
- wiki (англ.)
- Список [Архівовано 16 травня 2008 у Wayback Machine.] елементів SVG, що підтримує браузер Opera
- Статті про можливості SVG від розробників Опери
- FAQ(англ.) Про реалізацію SVG в браузері Mozilla Firefox
- Приклади [Архівовано 29 квітня 2014 у Wayback Machine.](рос.) використання формата SVG
- Сторінка [Архівовано 16 травня 2008 у Wayback Machine.](англ.) формату SVG на сайті Adobe
- Школи консорціуму W3C. Введення в SVG [Архівовано 30 квітня 2008 у Wayback Machine.] (рос.)
- Опис креслень у форматі SVG (v.sytnik.lviv.ua) [Архівовано 26 вересня 2013 у Wayback Machine.] (рос.)
- Adobe SVG Viewer [Архівовано 17 січня 2006 у Wayback Machine.], зокрема і плагін для підтримки формату в IE6.
- Renesis Player, плагін для Internet Explorer, Windows File Explorer та окремий власне плеєр.
- Сайт [Архівовано 4 жовтня 2020 у Wayback Machine.] Inkscape (вільний векторний графічний пакет для роботи з SVG).