Поглед към мащабирана векторна графика (SVG)
Векторните графики са широко прилагани в печатните медии. В уебсайт можем да добавим и векторна графика със SVG или Мащабируема векторна графика. Позовавайки се на официалната спецификация на W3.org, SVG е описан като:
Език за описание на двуизмерни графики в XML. SVG позволява три вида ßграфски обекти: векторни графични форми (например пътеки, състоящи се от прави линии и криви), изображения и текст.
Тя действително е съществувала от 1999 г. насам и от 16 август 2011 г. става препоръка на W3C. Все пак SVG все още е доста недостатъчно използван, докато има много предимства при използването на Vector, а не Bitmap за показване на графики или изображения на уебсайт..
Предимства на SVG
По отношение на обслужването на графики на уебсайтове SVG предлага няколко предимства пред Bitmap, някои от които включват:
Резолюция независима
Bitmap / растерната графика е зависима от резолюцията - тя е изградена върху пиксели. Показваните графики ще изглеждат пикселизирани, когато се преоразмеряват на определено ниво на увеличение. Това не се случва с векторната графика, която е независима по природа резолюция, тъй като графиката се изразява с математическо уравнение, което го прави може да се мащабира при всяко ниво на увеличение при запазване на качеството, дори и при Retina Display.
Намаляване на HTTP заявката
SVG може да бъде вграден директно в HTML документ с SVG , така че браузърът не трябва да прави заявка за показване на графиката. Това също води до по-добра ефективност на зареждането на уебсайта.
Стайлинг и скриптове
Вграждане директно с SVG tag също ще ни позволи да оформяме графиката лесно чрез CSS. Ние можем промяна на свойствата на обекта като фонов цвят, непрозрачност, граници и др. Също така можем да манипулираме графиката чрез JavaScript.
Може да бъде анимиран и редактиран
SVG обектът може да бъде анимиран, когато използва анимационен елемент или чрез JavaScript библиотека като jQuery. SVG обектът може да се редактира с всеки текстов редактор или графичен софтуер като Inkscape (който е безплатен) или Adobe Illustrator.
По-малък размер на файла
SVG има по-малък размер на файла в сравнение с Bitmap, който има подобна графична презентация.
Рисуване на основни форми с SVG
Според спецификацията, можем да начертаем някои основни форми като правоъгълник, кръг, линия, елипса, полилиния и многоъгълник с SVG и за да може браузърът да визуализира SVG графиката, всички тези графични елементи трябва да бъдат вмъкнати в маркер. Нека да видим примерите по-долу за повече подробности:
линия
Да нарисува линия в SVG можем да използваме
Както можете да видите по-горе, координатата на началната точка на линията се изразява с първите два атрибута x1 и x2, докато координатата на крайната точка на линията се изразява с y1 и y2.
Има и два други атрибута: удар и инсулт ширина които се използват за определяне на цвета на границата и съответно ширината на границата. Като алтернатива, можем също да дефинираме тези атрибути в рамките на вграден стил, например така:
накрая просто прави същото.
- Преглед на демо “линия”
Полилинии
Почти е подобен на
точки атрибути, които съхраняват всички координати, формиращи линиите.
- Преглед на демо “Полилинии”
правоъгълник
Рисуването на правоъгълник също е просто с това
- Преглед на демо “правоъгълник”
кръг
Можем също да начертаем кръг с 100 радиус, определен с R атрибут:
Първите два атрибута, CX и CY определят централната координата на кръга. В горния пример сме задали 102 и двете за х и ш координати, ако тези атрибути не са посочени, 0 ще се приема като стойност по подразбиране.
- Преглед на демо “кръг”
елипса
Можем да нарисуваме елипса х радиус на линия и. \ t ш радиус на линия с RX и Ри атрибут;
- Преглед на демо “елипса”
многоъгълник
С
- Преглед на демо “многоъгълник”
Използване на векторния графичен редактор
Както виждате, рисуването на прости обекти с SVG в HTML е доста лесно. Въпреки това, когато обектът стане по-сложен, тази практика вече не е идеална и ще ви даде главоболие.
За щастие, както споменахме по-горе, можем да използваме редактор на векторни графики Adobe Illustrator или Inkscape да си свършат работата. Ако сте запознати с този софтуер, със сигурност е много по-лесно да рисувате обекти с техния графичен потребителски интерфейс, вместо да ги кодирате сами в HTML етикет.
Ако работите с Inkscape, можете да запишете вашата векторна графика като обикновен SVG, след което да я отворите в текстов редактор. Сега трябва да намерите SVG кодовете във файла. Копирайте всички кодове и ги поставете във вашия HTML документ.
Или можете също да вградите .SVG файл чрез един от тези елементи; закрепвам, вградена рамка и обект, например;
Резултатите в крайна сметка ще бъдат същите.
В този пример използвам този Apple iPod от OpenClipArt.org.
- Преглед на демо “Ipod”
Поддръжка на браузър
Що се отнася до поддръжката на браузъра, SVG се поддържа много добре във всички основни браузъри, освен в IE8 и по-рано. Но този въпрос може да бъде решен с тази библиотека на JavaScript, наречена Raphael.js. За да направим нещата по-лесни, ще използваме този инструмент, ReadySetRaphael.com, за да преобразуваме нашия SVG код в поддържан от Raphael формат. Ето как.
Първо, изтеглете и включете Raphael.js библиотека към вашия HTML документ. След това качете .SVG файл на сайта, копирайте и поставете генерирания код в следния товар функция;
window.onload = function () // тук има код Raphael
Вътре тяло поставете следното Разделение с RSR атрибут id;
Това е всичко. Вижте примера от връзката по-долу.
- Преглед на демо “Raphael”
Заключителни мисли
Така че това е основата с SVG. Надяваме се, че сега имате справедливо разбиране на тази тема. Това е най-добрият начин да оптимизирате сайта си за всяка резолюция на екрана, дори и за използване на дисплея на Retina.
Както винаги, ако си човек с приключения, тук сме поставили още няколко препратки и дискусия, за да разберем по-задълбочено тази тема..
- Въведение в SVG - W3 училищата
- Резолюция Независима с SVG - списание Smashing
- Защо не използвате SVG? - NetTuts
Благодарим ви за четенето и се надяваме да се радвате на тази публикация.
- Преглед на демо
- Изтеглете Източник
