SVGs: Създайте HTML5 графика, която работи във всеки браузър

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


Когато работите с изображения в мрежата, е важно да използвате правилния тип файл по предназначение. Въпреки че формати като JPG, PNG и GIF са най-познати на уеб потребителите, те не винаги могат да бъдат подходящият избор.

Тази статия ще ви запознае с основите на друг вид формат на изображението: SVG или Scalable Vector Graphics формат.

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

Формати на вектора срещу растерните изображения

В света на файловете с изображения има два основни типа формат: растър и вектор. Растерните формати са базирани на пиксели. Тези формати включват такива типове файлове като JPG, PNG и GIF.

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

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

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

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

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

Това е поради разликите между векторните и растерните формати; SVG формат е начинът да отидете тук.

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

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

Така че, когато увеличите мащаба на растерна графика – например JPG или PNG файл, ще видите, че изображението все повече се размива и изкривява.

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

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

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

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

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

Недостатъци на SVG

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

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

Въпреки това, Inkscape е безплатен, с отворен код редактор, който може да обработва SVG файлове.

Други разширения за векторни формати

В допълнение към SVG (мащабируема векторна графика), основните разширения за векторни файлове включват:

  • .drw (векторен файл)
  • .eps (капсулиран PostScript)
  • .pct (графичен формат на Macintosh bitmap)
  • .pif (GDF формат на векторно изображение)
  • .ps (Adobe PostScript)
  • .svf (прост векторен формат)

SVG елементи в HTML5

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

линия

Елементът може да се използва за създаване на една права линия, състояща се от две точки – начало и край. Всяка точка, разбира се, ще има две координати, „x” и „y”.

Кодът ще изглежда така:

Можете също да сдвоите други атрибути с < линия > елемент: ход определя цвета и ширината на хода контролира дебелината на линията.

Rect

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

кръг

Както бихте очаквали, елементът създава кръг. За да създадете кръг с радиус 40 (зададен с атрибут r), центриран с 40 пиксела надолу и 40 от горния ляв ъгъл, зелено запълване и черен контур, използвайте кода по-долу:

Ако не посочите атрибутите cx и cy, браузърът ще интерпретира стойността по подразбиране „0.“

Други елементи, с които можете да играете, включват, и .

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

SVG се поддържа добре във всички основни налични браузъри, с изключение на IE8 и по-старите версии.

Какво ще кажете за SWF?

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

С подкрепата за намаляването на Flash в полза на HTML5, CSS, JavaScript и SVG е изключително важно уеб специалистите да разберат разликите между SVG и SWF и да се научат да използват съвременни технологии.

Какво е SWF?

SWF е съкращение, което означава Малък уеб формат. Това е формат на Adobe Flash файл, който може да се използва за графики, анимации и вградени приспособления за аплети. Flash плъгинът трябва да бъде инсталиран в браузър, за да може SWF съдържанието да се изобразява.

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

Прилики и разлики между SVG и SWF

SWF и SVG са и двата формата на векторни графични файлове и двамата могат да бъдат скриптирани за създаване на анимации и интерактивност. По този начин те са подобни. Въпреки това, има много начини, по които SWF и SVG са различни.

SVG е отворен стандарт

SVG стандартът е разработен от World Wide Web Consortium (W3C) и в резултат на това е напълно отворен и свободен за използване и надграждане. SWF, от друга страна, е патентован Flash формат, собственост на Adobe. През 2008 г. Adobe премахна много от ограниченията, регулиращи използването на SWFs, но SWF остава патентован формат.

С SVG е по-лесно да се работи

SVG кодът е четим от XML обикновен текст XML. SVG файлове могат да бъдат създадени с помощта на произволен текстов редактор и създаването на прости SVG файлове е лесно да се направи и може да се научи бързо от всеки, запознат с уеб езици като HTML, CSS и JavaScript. SWF трябва да бъдат създадени и редактирани със сложни програми като Adobe After Effects или алтернативи с отворен код, като Motion-Twin ActionScript 2 Compiler.

В допълнение, скриптирането на SVG файлове за анимация и интерактивност може да се прави с CSS и JavaScript – езици, с които всеки уеб дизайнер и разработчик работи ежедневно. SWFs, от друга страна, са скриптирани с ActionScript на Adobe, който е подобен на JavaScript, но не е идентичен и повечето разработчици се справят с него на много по-рядко.

Добавянето на SVG към уебсайт е също толкова просто, колкото пускането на кода в HTML документ в съответствие с други HTML елементи. Освен това SVG файловете могат да бъдат вградени в HTML документ. SWF трябва да бъдат вградени в HTML документ.

SVG е по-добър за SEO

Тъй като SVGs са написани в обикновен текст, те могат да бъдат четени и индексирани от търсачките. SWFs, от друга страна, са двоични файлове, които трудно търсят търсачките. В резултат на това, ако използвате SVG или SWF за предаване на съдържание, е по-добре да използвате SVG, ако трафикът от търсачката е важен за вашия уебсайт.

Поддръжката на SVG расте

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

И SVG, и SWF поддържат множество типове медии

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

Обобщение на SWF

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

SVG ресурси

Има много безплатни статии, ръководства и ръководства, които ще ви помогнат да започнете с SVG. Ето някои от най-добрите.

Научете основите

Ако току-що започвате с SVG, прегледайте този урок от Creative Bloq за създаване на прости форми и използване на пълнежи и градиенти. Втора опция, която обхваща много от същите основни техники, е това ръководство за започване на SVG от Envato Tuts+.

Използвайте графичен софтуер за създаване на SVG

Ако ще създадете нещо по-сложно от прости форми, ще искате да работите с векторна графична програма, като Adobe Illustrator, която може да експортира файлове във SVG формат. Това бързо ръководство от CSS-Tricks ще ви покаже как да използвате Illustrator за създаване на анимирана реклама, която използва само HTML и CSS. Друг страхотен ресурс за научаване как да използвате илюстратор за създаване на SVGs идва от Web Designer Depot.

Ако нямате достъп до Adobe Illustrator, нямате късмет. Inkscape е професионална качествена векторна графична програма, която е безплатна и с отворен код. Налични са и много страхотни уроци от Inkscape, които ще ви помогнат да започнете с програмата и да ви покажем как да експортирате вашите творения във SVG формат.

Научете усъвършенствани SVG техники

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

  • Урокът SVG от мрежата за разработчици на Mozilla.
  • SVG праймер за днешните браузъри, безплатна електронна книга от W3C.

И двата ресурса са обширни и обхващат цялата широта на настоящото мислене и практика по отношение на SVG програмирането. Тези ресурси не са за начинаещи, но ако ви е удобно с HTML и CSS и искате да станете специалист в работата със SVG, тогава сте готови да ги използвате.

Създайте SVG анимации

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

  • Урок от Дейвид Уолш за създаване на SVG анимации с помощта на CSS и JavaScript.
  • Обширен урок от Дженков, който обхваща всички аспекти на работата с SVG, включително CSS анимации и JavaScript скриптове.
  • Списъкът на Hongkiat от осем водещи библиотеки на JavaScript за създаване на SVG анимации.

Допълнителни ресурси

  • SVG Tutorial на Mozilla Developers Network: урок, който се работи, който обсъжда всички аспекти на SVG формата за използване в браузърите на Mozilla.
  • The Simple Intro to SVG Animation: страхотен урок, написан от David Walsh.
  • ImageMagick Въведение и ресурси: колекция от графични инструменти, които включват някои за PostScript.

заключение

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map