Погляд у масштабовану векторну графіку (SVG)

Векторна графіка широко застосовується в друкованих ЗМІ. На веб-сайті можна також додати векторну графіку з SVG або Масштабована векторної графіки. Посилаючись на офіційну специфікацію на W3.org, SVG описується як:

Мова для опису двовимірної графіки в XML. SVG дозволяє використовувати три типи ßграфічних об'єктів: векторні графічні форми (наприклад, шляхи, що складаються з прямих ліній і кривих), зображення і текст.

Вона існує з 1999 року, а станом на 16 серпня 2011 року вона стала рекомендацією W3C. Тим не менш, SVG все ще значно недооцінюється, в той час як існує багато переваг у використанні Vector, а не Bitmap для обслуговування графіки або зображення на веб-сайті.

Переваги SVG

У термінах обслуговування графіки на веб-сайтах SVG пропонує кілька переваг перед Bitmap, деякі з яких включають:

Резолюція Незалежна

Графічна / растрова графіка залежить від дозволу - вона побудована на пікселях. Графіки, які подаються, виглядатимуть нерівними, коли їх розмір змінюється на певному рівні масштабування. Це не відбувається з векторною графікою, яка є незалежною від природи роздільною здатністю, тому що графіка виражається математичним рівнянням, яке робить це масштабується на будь-якому рівні масштабування при збереженні якості, навіть на Retina Display.

Зменшення HTTP-запиту

SVG може бути вбудований безпосередньо в документ HTML з svg , тому браузеру не потрібно робити запит на обслуговування графіки. Це також дає змогу покращити ефективність завантаження веб-сайту.

Стайлінг і сценарії

Вбудовування безпосередньо з svg тег також дозволить нам легко оформляти графіку за допомогою CSS. Ми можемо змінювати властивості об'єкта такі як колір тла, непрозорість, межі тощо, як і звичайний тег HTML. Аналогічно, ми також можемо маніпулювати графікою за допомогою JavaScript.

Може бути анімованим і відредагованим

Об'єкт SVG може бути анімований, коли він використовує елемент анімації або через бібліотеку JavaScript, як jQuery. Об'єкт SVG також можна редагувати за допомогою будь-якого текстового редактора коду або графічного програмного забезпечення, наприклад Inkscape (який є безкоштовним) або Adobe Illustrator.

Менший розмір файлу

SVG має менший розмір файлу порівняно з Bitmap, який має подібну графічну презентацію.

Малювання основних форм з SVG

Відповідно до специфікації, ми можемо намалювати деякі основні форми, такі як прямокутник, коло, лінія, еліпс, полілінія і багатокутник з SVG і для того, щоб браузер відтворив графіку SVG, всі ці графічні елементи повинні бути вставлені в . Докладніше див. Приклади нижче:

Лінія

Малювати рядок в SVG ми можемо використовувати елемент. Цей елемент використовується для малювання однієї прямої лінії, тому він буде складатися тільки з двох точок, початок і кінець.

Як ви можете бачити вище, координата початкової точки лінії виражається першими двома атрибутами x1 і x2, при цьому координата кінцевої точки лінії виражається за допомогою y1 і y2.

Є також два інших атрибути: інсульт і ширина обведення які використовуються для визначення кольору і ширини кордону відповідно. Крім того, ми можемо також визначити ці атрибути у вбудованому стилі, наприклад:

це врешті-решт просто робить те ж саме.

• Переглянути демонстрацію “Лінія”

Полілінія

Це майже схоже на , але з елемент ми можемо намалювати кілька рядків замість одного. Ось приклад:

елемент має балів атрибути, які зберігають всі координати, що утворюють лінії.

• Переглянути демонстрацію “Полілінія”

Прямокутник

Малюнок прямокутника також простий з цим елемент. Потрібно лише вказати ширину та висоту:

• Переглянути демонстрацію “Прямокутник”

Коло

Також можна намалювати коло з елемент. У наступному прикладі ми створимо коло з 100 радіус, визначений за допомогою r атрибут:

Перші два атрибути, cx і cy визначають координати центру кола. У наведеному вище прикладі ми встановили 102 як для x і y координати, якщо ці атрибути не вказані, 0 буде прийнято як значення за замовчуванням.

• Переглянути демонстрацію “Коло”

Еліпс

Можна намалювати еліпс . Вона працює досить схожою на коло, але цього разу ми можемо керувати саме тим x радіус лінії і y радіус лінії з rx і ри атрибут;

• Переглянути демонстрацію “Еліпс”

Багатокутник

З елемент, ми можемо намалювати кілька сторін форм, таких як трикутник, шестикутник і навіть прямокутник. Ось приклад:

• Переглянути демонстрацію “Багатокутник”

Використання векторного графічного редактора

Як бачимо, складання простих об'єктів за допомогою SVG в HTML досить легко. Однак, коли об'єкт стає більш складним, ця практика більше не є ідеальною і дасть вам головний біль.

На щастя, як ми вже згадували вище, ми можемо використовувати редактор векторної графіки Adobe Illustrator або Inkscape виконувати завдання. Якщо ви знайомі з цим програмним забезпеченням, то набагато простіше малювати об'єкти за допомогою графічного інтерфейсу, ніж кодувати графіку в тезі HTML.

Якщо ви працюєте з Inkscape, Ви можете зберегти вашу векторну графіку як звичайний SVG, а потім відкрити її в текстовому редакторі коду. Тепер ви повинні знайти коди SVG у файлі. Скопіюйте всі коди і вставте їх у ваш HTML-документ.

Або, ви також можете вставляти .svg файл через один з цих елементів; вставляти, iframe і об'єкт, наприклад;

Результати з часом будуть однаковими.

У цьому прикладі я використовую цей Apple iPod від OpenClipArt.org.

• Переглянути демонстрацію “iPod”

Підтримка браузера

Що стосується підтримки браузера, SVG дуже добре підтримується у всіх основних браузерах, за винятком IE8 і раніше. Але це питання можна вирішити за допомогою цієї бібліотеки JavaScript, яка називається Raphael.js. Для того, щоб полегшити роботу, ми використаємо цей інструмент ReadySetRaphael.com для перетворення нашого SVG-коду у формат, що підтримується Raphael. Ось як.

Перш за все, завантажте та включіть Raphael.js до вашого HTML-документа. Потім завантажте .svg файл на сайт, скопіюйте і вставте згенерований код всередині наступного завантаження функції;

 window.onload = function () // тут знаходиться код Рафаеля 

Всередині тіла тега, покладіть наступне div с rsr атрибут id;

Ось і все. Перевірте приклад за посиланням нижче.

• Переглянути демонстрацію “Рафаель”

Заключні думки

Отже, це основи з SVG. Ми сподіваємося, що тепер у вас є чітке розуміння цієї теми. Це найкращий спосіб оптимізувати свій сайт для будь-якої роздільної здатності екрана, навіть для використання на дисплеї Retina.

Як завжди, якщо ви любитель пригод, то тут ми поклали ще кілька посилань і обговорення, щоб поглибити цю тему.

• Вступ до шкіл SVG - W3
• Резолюція Незалежна з SVG - Smashing Magazine
• Чому ви не використовуєте SVG? - NetTuts

Дякуємо за читання, і ми сподіваємося, що вам сподобався цей пост.

• Переглянути демонстрацію
• Завантажити джерело