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

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

SVG предлага редица предимства в сравнение с растерна графика, ето някои от тях:

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

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

Стайлинг и скриптове

Снимки могат да бъдат анимирани и може да се редактира

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

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

Създаване на прости форми, използвайки SVG

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

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

Както можете да видите по-горе, на мястото на произход до линията изразено от първия два атрибута x1 и x2. и крайна точка координати, изразени с линия Y1 и Y2.

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

в крайна сметка той просто прави същото нещо.

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

Този елемент е подобен на . но с помощта на елемент, можем да направим няколко реда, вместо на един. Ето един пример:

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

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

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

В първите два атрибути, CX и Су определи координатите на центъра на окръжността. В горния пример, ние създадохме 102 за X и Y координатите, ако тези качества не са посочени, 0 ще бъдат третирани като стойност по подразбиране.

Можем да се направи елипса използването на маркера . Принципът на създаване е същото като с кръг, но този път може да контролира радиуса на линия х и у радиус и RX и Ry атрибути;

многоъгълник

С елемент можем да направим няколко форми като триъгълник, шестоъгълник и дори правоъгълник. Ето един пример:

Както можете да видите, използвайки прости предмети, SVG в HTML-документ е доста лесно. Въпреки това, когато един обект е по-сложен, процесът не е съвършен.

Можете да вградите .svg -files посредством вграждане на тагове. вградена рамка и обект. например;

Резултатът в крайна сметка ще бъде същият.

* В този пример, ние използваме образа Apple Ipod от OpenClipArt.org

Подкрепа браузър

По отношение на подкрепата за браузъри, SVG е много добре поддържана във всички основни браузъри. с изключение на IE8 и по-ранни версии. Но този проблем може да бъде решен чрез Raphael.js. За да направим нещата по-лесно, ние ще използваме ReadySetRaphael.com инструмент. да трансформира нашия SVG- код във формат, който поддържа Рафаело.

На първо място, да изтеглят и да се свържете Raphael.js библиотека на вашия HTML-документ. След това заредете .svg файл към сайт, копирайте генерирания код в

Вътре тялото маркер. поставете следния DIV използване ID-атрибут RSR;

Това е всичко, което трябва sdelalat.

Заключителни мисли

Днес ние научили основите на SVG. Надяваме се, че сега имате правилно разбиране на този въпрос. Това е най-добрият начин да оптимизирате сайта си за всяка резолюция на екрана, дори и за използване на дисплей Retina.

Можете също така да се интересуват от тази статия: