Svg в мрежата. Въведение в мащабируемата векторна графика (SVG). !!! Важно е броят на точките да съвпада

Здравейте всички, скъпи фенове на безплатното преобразуване. Днес имаме интересен проект на нашия работен плот с кодово име Scalable Vector Graphics или накратко SVG. Защо на чужд език? За да не се досети никой.

За да проведем изследването, ще ни трябват някои материални ресурси, включително някаква свободно конвертируема валута, вероятно рубли.

Второ, имаме нужда от компютърен монитор, без значение дали е настолен компютър или смартфон. Тъй като четете този текст, това означава, че вече имате един ресурс. Остава само да притесните някои от добрите хора, които се намират наблизо, и да вземат назаем няколко хиляди рубли или в най-лошия случай няколкостотин долара.

Всичко това е абсолютно необходимо, за да разберем ясно какво е SVG и с какво е най-добре да го използваме.

Мащабируема векторна графика

Да започнем от външната обвивка, да преминем към вътрешното съдържание и след това, нека не се страхуваме от тази дума - да проникнем в самата същност на изследваното явление.

Както може би сте чували, има два вида графики.

• растер.
• вектор.

Започнете, като свалите очилата си и приближите очите си към трептящия компютърен монитор.

Какво виждаш?

Точно така – картината е съставена от милиони разноцветни точки. Това е, което е растер. Ето защо този вид графика се нарича "растерна".

Да преминем към втората част на експеримента. Повярвайте ми, ще се забавлявате много повече и може би дори ще намерите някои приключения.

Носете най-модерните си дрехи, обадете се на приятел или приятелка. Отиваме на нощен клуб. За какво? Изучавайте векторни графики.

Когато гостите са загрели добре в бара и започват танци с дайрета на дансинга, диджеят натиска малък бутон и облаци прозрачен глицеринов дим изпълват небето.

Когато димът се сгъсти достатъчно, диджеят натиска друг бутон. Лазерният пистолет се изстрелва и нещо като северно сияние започва да танцува над главите на танцуващата тълпа.

Това е векторна графика. Лазерният лъч е непрекъснат и рисува картини по заложен в компютърната програма алгоритъм - цифров визуален образ.

Точно така работи SVG - това е цифрово софтуерно описание на графични изображения, цветове и тяхното поведение.

Не напразно избрахме за пример нощен клуб. Въпросът е, че лазерът създава непрекъснати линии, но глицериновият дим има разпръсната, растерна текстура. Това означава, че тази изкуствена мъгла се състои от малки капчици течност, суспендирани във въздуха, от които се отразява лазерен лъч, така че визуалните образи се формират в ретината на очите ни.

На компютърните екрани непрекъснатите вектори се преобразуват в многоцветни матрични пиксели и нашият мозък, според собствения си алгоритъм, формира възприятието за гладка картина.

Технологично решение SVG

Е, ние подредихме външната обвивка, сега нека да преминем към вътрешната същност на феномена. Можете да кажете - защо се нуждаем от цялата тази наука, по-добре е да кажем директно - защо е необходима, тази SVG?

Отделете време. Факт е, че технологията е тази, която определя всички външни ефекти. Сега нека ви кажем една ужасна тайна. SVG е брат на хипертекстовия език за маркиране HTML, който се използва за създаване на красиви и динамични уебсайтове.

Точно така, SVG графичният файл е XML текстов файл, пълен с HTML-подобни тагове и данни, структурирани с помощта на XML. Логично е да се предположи, че SVG графиките могат да бъдат интегрирани директно в HTML кода на уеб страница, форматирани с помощта на CSS стилови таблици и дори включени скриптове за програмиране на Javascript.

Просто развихрете въображението си (може и капучино, моля) и се опитайте да предоставите безкрайните възможности на векторната графика, генетично модифицирана с HTML5 тагове.

1. Първо, векторната графика по дефиниция се мащабира без загуба на качество на изображението (тъй като няма пиксели и когато се увеличи, изображението няма да се превърне в картина на художник кубист).
2. Второ, SVG е напълно съвместим с уеб технологиите и следователно става органична част от уебсайтовете.
3. Трето, чрез добавяне на обекти към цифровото описание на картината и свързване на Javascript скриптове към тях, ние правим изображението интерактивно, тоест реагиращо на определени потребителски действия с дадени отговори.
4. Четвърто, SVG е текстов формат, така че можете да оптимизирате файла за SEO без външни мета тагове чрез директно въвеждане на ключови думи в кода на изображението.

Въз основа на тези технически спецификации ще изведем обхвата на SVG.

Как можете да използвате SVG във ваша полза

Според принципите на честния маркетинг трябва да се признае, че SVG има своите недостатъци. С увеличаването на детайлността на изображението теглото на файла започва да нараства със скоростта на лавина.

Така че, за съжаление, SVG е напълно неподходящ за реалистични снимки с висока разделителна способност и подробни карти на терена.

SVG форматът е оптимален за малки, но мащабируеми и интерактивни изображения.

• Навигационни ленти и бутони с анимирани ефекти.
• Логота, които не губят качество на изображението при уголемяване или намаляване.
• Изображенията, които са като гума, се адаптират към всеки формат и резолюция на екрана на компютъра. SVG е незаменим за отзивчиви сайтове, удобни за мобилни устройства.

Най-полезно – SVG графиките са най-подходящи за електронна търговия.

Например изображение на продавания продукт е публикувано на уебсайта на онлайн магазин. Потребителят може да кликне върху отделни части от изображението и започва красива анимация, превръщайки изображението в нещо друго.

На тази основа можете да разработите интерактивен преглед на продукта от всички страни и дори отвътре.

Или на медицински уебсайт, като използвате такава графична програма, можете да направите тест за бременност. Или диагностичен плъгин за тези, които искат да се подложат на бърз анализ и да разберат от какво ще умрат млади.

След като клиентът научи ужасната тайна за своята ужасна болест, самата ръка се протяга, за да щракне с мишката върху съседната част на SVG изображението с червения бутон „Купете лекарство за всички болести“. Една таблетка е достатъчна. Цена $1000.

Какво полезно изобретение е този SVG.

Методи за конвертиране в SVG

На нашия уебсайт ви предлагаме конвертиране чрез различни методи:

Има ли някакъв начин да се намали размера на SVG?

да С помощта на специални програми като SVGO или на нашия уебсайт с помощта на функцията за оптимизация на SVG.

Нашата услуга е изградена върху използването на отворени компоненти, по-специално SVGO. С този SVG оптимизатор можете да намалите размера на SVG изображенията, като премахнете ненужната информация, като например:

• изчистване на атрибути от нови редове и повтарящи се обекти;
• изтриване на описание на типа документ;
• премахване на XML инструкции;
• изтриване на коментари;
• премахване на метаданни;
• и друга информация.

Векторната графика се използва широко в печата. Но можем също да го използваме за уебсайтове, използващи SVG ( Scalable Vector Graphic - мащабируема векторна графика). Според спецификацията на W3.org SVG се дефинира като:

Език за описание на двуизмерни графики в XML. SVG позволява три типа обекти: векторни графики (като пътища, съставени от прави линии и криви), изображения и текст.

Въпреки факта, че SVG е включен в препоръките на W3C от август 2011 г., тази технология практически не се използва в уеб проекти, въпреки че има редица предимства пред растерните изображения. В тази поредица от уроци ще ви представим как да работите със SVG елементи на уеб страници.

Предимства на SVG

Независимост на резолюцията

Растерните изображения зависят от разделителната способност. Графиките придобиват непредставим вид при преоразмеряване до определен мащаб. При векторната графика тази ситуация е принципно невъзможна, тъй като всичко е представено от математически изрази, които автоматично се преизчисляват при промяна на мащаба и качеството се поддържа при всякакви условия.

Намаляване на броя на HTTP заявките

SVG може да бъде вграден директно в HTML документ с помощта на маркера svg, така че браузърът не трябва да прави никакви заявки, за да обслужва графиките. Този подход има добър ефект върху характеристиките на зареждане на уебсайта.

Стилове и скриптове

Вграждането с маркера svg също улеснява стилизирането на вашите графики с помощта на CSS. Можете да промените свойствата на обекта като цвят на фона, прозрачност, граници и т.н. Графиката може да се манипулира по подобен начин с помощта на JavaScript.

Лесен за редактиране и анимиране

SVG обектите могат да бъдат анимирани с помощта на CSS или JavaScript. SVG обектите могат също да бъдат модифицирани с помощта на текстов редактор.

По-малък размер на файла

SVG има по-малък размер на файла в сравнение с растерната графика.

Основни SVG форми

Според спецификацията можем да начертаем няколко основни фигури: линия, полилиния, правоъгълник, кръг, елипса. Всички елементи трябва да бъдат вмъкнати в тага . Нека разгледаме основните елементи в детайли.

Линия

За да покажете линия в SVG, използвайте елемента . Той чертае отсечка, за която трябва да се определят две точки: началото и края.

Началото на сегмента се определя от атрибутите x1 и y1, а крайната точка се определя от координатите в атрибутите x2 и y2.

Има и два други атрибута (щрих и щрих-ширина), които се използват съответно за определяне на цвета и ширината на линията.

Този обект е подобен на , но използвайки елемента Можете да рисувате няколко линии наведнъж.

елемент Съдържа атрибута points, който се използва за указване на координатите на точките.

Правоъгълникът се изчертава с помощта на елемента . Трябва да определите ширината и височината.

За да покажем кръг, използваме елемента . В следващия пример създаваме кръг с радиус 100, който е дефиниран в атрибута r:

Първите два атрибута cx и cy определят координатите на центъра. В горния пример задаваме стойност 102 и за двете координати. Стойността по подразбиране е 0.

За да покажем елипса, използваме елемента . Работи по същия начин като кръг, но можем конкретно да посочим радиусите x и y, като използваме атрибутите rx и ry:

елемент Показва полиедрични форми като триъгълник, шестоъгълник и др. Например:

Използване на векторен графичен редактор

Извеждането на прости SVG обекти в HTML е лесно. Въпреки това, тъй като сложността на обекта се увеличава, тази практика може да доведе до необходимост от голямо количество работа.

Но можете да използвате всеки векторен графичен редактор (напр. Adobe Illustratorили Inkscape) за създаване на обекти. Ако имате инструмент като този, рисуването на необходимите обекти в тях е много по-лесно от кодирането на графики в HTML таг.

Можете да копирате команди за векторна графика от файл в HTML документ. Или можете да вградите .svg файла, като използвате един от следните елементи: embed, iframe и object.

Резултатът ще бъде същият.

Поддръжка на браузър

SVG има добра поддръжка в повечето съвременни браузъри, с изключение на IE версия 8 и по-стари. Но проблемът може да бъде решен с помощта на JavaScript библиотеката. За да улесните работата си, можете да използвате инструмента ReadySetRaphael.com за конвертиране на SVG код във формат Raphael.

Първо изтегляме и включваме библиотеката в HTML документа. След това зареждаме .svg файла, копираме и поставяме получения код във функцията след зареждане:

В тага body поставяме следния елемент div с идентификатор rsr.

И всичко е готово.

В следващия урок от поредицата ще разгледаме как да стилизираме SVG обекти в CSS.

Тази публикация е първата от поредица от статии за SVG (Scalable Vector Graphic), обхващаща основите на векторната графика на сайта.

Векторната графика се използва широко в печата. За уебсайтове има SVG, което според официалната спецификация на w3.org е език за описание на двуизмерни графики в XML. SVG включва три типа обекти: форми, изображения и текст. SVG съществува от 1999 г., а от 16 август 2011 г. е включен в препоръките на W3C. SVG е силно подценен от уеб разработчиците, въпреки че има няколко важни предимства.

Предимства на SVG

• Мащабиране: За разлика от растерната графика, SVG не губи качество при мащабиране, така че е удобно да се използва за развитие на ретината.
• Намаляване на HTTP заявките: когато използвате SVG, броят на обажданията към сървъра се намалява и съответно се увеличава скоростта на зареждане на сайта.
• Стил и скриптове: Използвайки CSS, можете да промените графичните настройки на сайта, като фон, прозрачност или граници.
• Анимация и редактиране: с помощта на javascript можете да анимирате SVG, както и да го редактирате в текстов или графичен редактор (InkScape или Adobe Illustrator).
• Малък размер: SVG обектите тежат много по-малко от растерните изображения.

Основни SVG форми

Според официалната спецификация можете да рисувате прости обекти с помощта на SVG: правоъгълник, кръг, линия, елипса, полилиния или многоъгълник с помощта на таг svg.

Проста линия с помощта на етикет линиясамо с два параметъра - начални точки (x1 и x2) и крайни точки (y1 и y2):

Можете също така да добавите атрибути или стилове за щрих и ширина на щриха, за да зададете цвета и ширината:

Style="stroke-width:1; stroke:rgb(0,0,0);"

прекъсната линия

Синтаксисът е подобен на предишния, използва се етикетът полилиния, атрибут точкизадава точки:

Правоъгълник

Извикан от тага rect, можете да добавите някои атрибути:

кръг

Извиква се от етикет кръг, в примера използвайки атрибута rзадайте радиуса, cxИ cyпосочете координатите на центъра:

Елипса

Извиква се от етикет елипса, работи по подобен начин кръг, но можете да посочите два радиуса - rxИ ри:

Многоъгълник

Извиква се от етикет многоъгълник, един многоъгълник може да има различен брой страни:

Използване на редактори

Както можете да видите от примерите, рисуването на основни SVG форми е много просто, но обектите могат да бъдат много по-сложни. За тях трябва да използвате векторни графични редактори, като Adobe Illustrator или Inkscape, където можете да записвате файлове във формат SVG и след това да ги редактирате в текстов редактор. Можете да вмъкнете SVG в страница, като използвате вграждане, iframe и обект:

Пример е изображение на iPod от OpenClipArt.org.

Честит ден на победата на всички! И днес пиша първата статия от поредицата, в която ще разберем какво е SVG и как да го използвам.

SVG (мащабируема векторна графика)е език за описание на двуизмерна графика, базиран на XML. Тази технология постепенно набира скорост и това се дължи на следното:

• Когато преоразмерявате svg форми, формите винаги се преначертават, така че винаги ще виждате гладко и красиво изображение без пикселизация
• Браузърът не трябва да изисква изображението от сървъра, т.к той го рисува сам, следователно производителността се увеличава
• Можете да стилизирате обекти с помощта на CSS, като обикновени HTML елементи, или с помощта на JavaScript
• Може да се редактира или анимира с помощта на CSS и JavaScript
• По-малък размер

Така че, мисля, че вече разбирате защо е необходимо и защо е по-добро от обикновеното изображение, а сега нека да преминем към това как да го използвате.

Като начало си струва да отбележим, че всички наши фигури трябва да са в етикета svg, сега да рисуваме линия. За показване на линията се използва етикет линия, който има следните атрибути:

• x1- Начало x координата
• x2- Крайна х координата
• y1- Начало y координата
• y2- Край y координата
• ширина на удара- Ширина на линията
• удар- Цвят на линията

Но какво ще стане, ако трябва да рисуваме веднага няколко реда? Използвайте множество тагове линияняма да е много хубаво. Има етикет за това полилиния.

На етикета полилинияима атрибут точки, където посочваме координатите хИ гразделени със запетая, след това направете интервал и напишете координатите на следващата точка и т.н. Забележете, че тук има атрибут запълвам, в който можем да посочим цвета във всеки един от форматите css, който ще запълни пространството между редовете. Ако искате интервалът между редовете да е празен, посочете стойността нито един.

Нека да преминем към по-сложни форми и да рисуваме правоъгълник.

За да начертаете правоъгълник, трябва да използвате етикета прав, където в атрибути ширинаИ височинапосочвам ширинаИ височинасъответно, а останалите атрибути вече са ви познати и изпълняват абсолютно същите функции като с линиите.

За да нарисувате кръг, използвайте етикета кръги атрибути cx, cyИ rза задаване на координати център на кръгаи него радиус.

Друг елемент - елипсасе чертае точно по същия начин като кръг, но там можем сами да зададем радиусите по оста хи по оста г. Тагът се използва за изобразяването му елипса

Ако трябва да се оттеглите многостенни фигури, като например петоъгълник, след това използвайте маркера многоъгълник

Атрибут точкина етикета многоъгълникработи по същия начин като атрибута точкина етикета полилиния.

Ако обектът е много сложен, тогава можете да използвате всеки векторен графичен редактор и да го нарисувате там, след което просто да го вмъкнете така

SVGподдържан Т.Е.° С 9 версии, Mozilla Firefoxс 1.5 , Google Chromeс 3.0 И операс 8.0 .

Това приключва статията. Оказа се голямо, но просто. В следващия ще продължим да изучаваме тази интересна технология, но това е всичко. Късмет!

Тази публикация е първата от поредица от статии за SVG (Scalable Vector Graphic) графики, обхващащи основите на векторната графика на сайта.

Векторната графика се използва широко в печата. За уебсайтове има SVG, който според официалната спецификация на w3.org е език за описание на двуизмерни графики в XML. SVG включва три типа обекти: форми, изображения и текст. SVG съществува от 1999 г. и е включен в препоръките от 16 август 2011 г. W3C. SVG е силно подценен от уеб разработчиците, въпреки че има няколко важни предимства.

Предимства на SVG

• Мащабиране: За разлика от растерната графика, SVG не губи качество при мащабиране, така че е удобно да се използва за развитие на ретината.
• Намаляване на HTTP заявките: когато използвате SVG, броят на обажданията към сървъра се намалява и съответно се увеличава скоростта на зареждане на сайта.
• Стил и скриптове: Използвайки CSS, можете да промените графичните настройки на сайта, като фон, прозрачност или граници.
• Анимация и редактиране: с помощта на javascript можете да анимирате SVG, както и да го редактирате в текстов или графичен редактор (InkScape или Adobe Illustrator).
• Малък размер: SVG обектите тежат много по-малко от растерните изображения.

Основни SVG форми

Според официалната спецификация можете да рисувате прости обекти с помощта на SVG: правоъгълник, кръг, линия, елипса, полилиния или многоъгълник с помощта на таг svg.

Проста линия с помощта на етикет линиясамо с два параметъра - начални точки (x1 и x2) и крайни точки (y1 и y2):

Можете също така да добавите атрибути или стилове за щрих и ширина на щриха, за да зададете цвета и ширината:

Style="stroke-width:1; stroke:rgb(0,0,0);"

прекъсната линия

Синтаксисът е подобен на предишния, използва се етикетът полилиния, атрибут точкизадава точки:

Правоъгълник

Извикан от тага rect, можете да добавите някои атрибути:

кръг

Извиква се от етикет кръг, в примера използвайки атрибута rзадайте радиуса, cxИ cyпосочете координатите на центъра:

Елипса

Извиква се от етикет елипса, работи по подобен начин кръг, но можете да посочите два радиуса - rxИ ри:

Многоъгълник

Извиква се от етикет многоъгълник, един многоъгълник може да има различен брой страни:

Използване на редактори

Както можете да видите от примерите, рисуването на основни SVG форми е много просто, но обектите могат да бъдат много по-сложни. За тях трябва да използвате векторни графични редактори, като Adobe Illustrator или Inkscape, където можете да записвате файлове във формат SVG и след това да ги редактирате в текстов редактор. Можете да вмъкнете SVG в страница, като използвате вграждане, iframe и обект:

Пример е изображение на iPod от OpenClipArt.org:

Поддръжка на браузър

SVG се поддържа от почти всички съвременни браузъри с изключение на Internet Explorer 8 и по-стари версии. Но това също може да бъде коригирано с помощта на javascript библиотеката Raphael.js. Можете да конвертирате SVG файл в този библиотечен формат на ReadySetRaphael.com.

Първо трябва да свържете библиотеката Raphael.js към желаната страница, след това да изтеглите SVG файла, да копирате и поставите генерирания код във функция:

Window.onload=function() ( //вмъкнете код на Raphael тук)

Вмъкване на страницата дивс атрибут rsr.