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

    Погляд у масштабовану векторну графіку (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

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

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