Advertisement
  1. Web Design
  2. SVG
Webdesign

Начинаем Работать с Масштабируемой Векторной Графикой (SVG)

by
Length:MediumLanguages:
This post is part of a series called Strange and Unusual HTML.
Explaining the “Details” and “Summary” Elements
Quick Tip: Don’t Forget the “optgroup” Element

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Сейчас такие времена, когда вы как веб-дизайнер, должны знать как использовать SVG (Scalable Vector Graphics - Масштабируемую Векторную Графику) в ваших сайтах. Поэтому, давайте разберемся с основами SVG графики, а также с такими более сложными элементами дизайна, такими, как иконками и логотипами.

Что Получится в Результате Урока

Getting started with SVG
Изображение выше - это скриншот - мы будет пользоваться SVG а не этим изображением..

Независимо от Разрешения Экрана

Недавно на WWDC 2012 Apple анонсировала использование новых ретина дисплеев на MacBook Pro. Ретина дисплеи имеют более высокую плотность пикселей (220.5ppi), чем обычные экраны и мониторы, и Apple, заявили, что их в их ретина-технологии плотность настолько высока, что невозможно увидеть пикселизацию человеческим глазом с обычной дистанции. Если вы видели эти ретина-дисплеи, то я уверен, вы согласитесь, что они потрясающие. Однако, их использование, приводится к возникновению проблем у веб-дизайнеров.

Проблемы начинаются, когда изображение изначально сохраненное с разрешением 72ppi, становится искаженным на ретина-дисплеях. Это проблема на 100% до сих пор не разрешена и дизайнеры ищут пути решения и обхода проблемы.

Один из возможных способов (для ряда случаев) это использование SVSG. Почему вам стоит использовать SVG? SVG отрисовывается как вектор и поэтому оно может масштабироваться для любого разрешения, которое используется на нашем экране, непрерывна выдавая резкость и качество, которое мы заложили в нем не этапе дизайна.

Мы не решим при этом все проблемы; Мы не можем использовать в качестве SVG картинки созданные в пиксельном формате, такие как jpg или png (однако для этого мы всегда можем использовать тег canvas). Но когда речь заходит, о таких вещах как иконки или логотипы - SVG формат оказывается очень полезен. Сегодня я собираюсь познакомить вас с основами работы с SVG, а также продемонстрирую вам как вы может использовать созданный вами в Adobe Illustrator векторный файл в дизайне вашего сайта.

Главное о SVG в Десяти Пунктах

Прежде чем мы приступим, я хотел бы вам дать основную информацию по SVG:

  • SVG означает Scalable Vector Graphics - Масштабируемая Векторная Графика.
  • SVG используется в качестве векторной графике в интернете.
  • XML формат используется для записи информации о векторной графике.
  • SVG изображения не теряют в качестве когда меняются в размерах или масштабируются.
  • SVG изображения можно анимировать.
  • SVG интегрируется с DOM и с ним можно работать с помощью JavaScript и СSS.
  • SVG изображения можно индексировать, это означает, что если у вас есть текст в формате SVG, то он будет виден поисковикам.
  • SVG изображения можно распечатать с любым разрешением.
  • SVG  рекомендуется к использованию W3C.
  • SVG  поддерживается всеми современными браузерами, хотя нет поддержки для IE8 и ниже. Можно использовать плагины, для всего что ниже.

Давайте Создадим Несколько Форм в SVG формате

Lines

Начнем с простого. Создадим линию. Мы делаем это записав следующий код в HTML документе.

Сначала мы используем тег 'svg', а затем внутри него записываем xml-разметку. Вот что мы здесь задаем:

  • X1: Координаты первой точки по оси x
  • Y1: Координаты первой точки по оси y
  • X2: Координаты последней точки по оси x
  • Y2: Координаты последней точки по оси y

Поэтому например, если нам нужно нарисовать диагональную линию, мы можем задать для y2 значение 200, и тогда конечная точка опустится у нас на 200, и мы получим диагональную линию. Мы также можем применить к ней стили, и сделать это можно в CSS. Здесь мы используем встроенные стили, но вы можете использовать какой-то дополнительный стиль, если вам хочется.

SVG - Creating a line

Окружности

Окружности создаются подобно линиями, за исключением некоторых атрибутов. Тут мы создадим серебристую окружность, с черным контуром и радиусом 50.

SVG - Creating a circle

cx и cy - атрибуты, задающие координаты x и y для центра окружности. Если мы их пропустим, то тогда, их значения по умолчанию будут равняться - ‘0’, чтоб приведет к тому, что окружность попадет за пределы страницы. И наконец атрибут ‘r’ - задает радиус окружности.

Прямоугольники

Как вы можете видеть теперь, создавать фигуры формате SVG достаточно просто. Создание прямоугольника - не исключение.

SVG - Creating a rectangle

Подобным образом, как мы задаем ширину и высоту элементов в CSS, мы также задаем атрибуты для ‘rect’ в svg.

Эллипс

Эллипс создается почти также как и окружность, однако, теперь у нас не один радиус, у нас есть атрибуты для радиусов вдоль оси x и вдоль оси y.

SVG - Creating an ellipse

Многоугольники

С многоугольниками чуть сложнее (но только чуть-чуть). Сначала мы задаем для многоугольника цвет заливки, оранжевую обводку и толщину обводки 10. Далее мы задаем атрибуты для точек. Каждая пара координат определяет x и  y координаты каждой точки многоугольника. В этом демонстрационном примере я создал звезду.

SVG - Creating a polygon star

Текст

Как было сказано ранее SVG формат великолепен, потому что текст в нем виден для поисковых машин и они индексируют его - в отличие от таких движков как Flash.

Вот как мы можем добавить текст:

SVG - Creating text

В коде выше, вы можете видеть, что мы задали x и y  координаты. А затем задали несколько CSS атрибутов, таких как font-family, weight, size и color.

Контуры

Говоря о теге path, на нужно поговорить о ‘d’-атрибуте. Этот ‘d’-атрибут описывает контур, который мы создаем. Каждая команда внутри ‘d’-атрибута, одна из команд-букв со своими параметрами. Команды для ‘d’-атрибута следующие:

  • M: движение к
  • L: линия к
  • H: горизонтально к
  • V: вертикально к
  • C: кривая к
  • S: гладкая кривая к
  • Q: квадратичная кривая Безье
  • T: гладкая кривая Безье
  • A: эллиптическая Дуга
  • Z: замкнуть контур
SVG - Creating paths

Вот пример кода:

Мы даже можем задать текст, который будет размещаться по кривой:

SVG - Creating text

Мы сначала определили контур в теге 'defs' а затем назначили ему Id = 'path1'. Затем мы можем использовать это с текстом задав ему атрибут ‘textPath’.

Создание масштабируемого Логотипа и Иконки в формате SVG

Теперь, когда мы разобрались с основой создания объектов в SVG формате, пришло время перейти к чему-то более сложному. К счастью для нас, это не будет таким сложным, а на самом деле все будет очень просто, за что отдельное спасибо Adobe Illustrator. Для тех из вас кто не знаком с Иллюстратором, ему можно дать такое описание:

Номер один в индустрии пакет для создания векторной графики, используемой в различных средах.

Откройте Иллюстратор и создайте свой логотип или иконку. Почти все профессиональные логотипы создаются в векторном формате,поэтому вы можете спросить его у ваших клиентов. Если нет, то тогда вам придется что-то сделать самому. Если вы не умеете работать в Иллюстраторе, то на Vectortuts+ вы можете найти много ценной информации по этому вопросу.

После того как вы нарисовали свой логотип или иконку, зайдите в "File > Save as", и там выберете "SVG", в выпадающем меню для типа файла. Дайте файлу название и нажмите Сохранить. Должно открыться диалоговое окно для сохранения SVG формата. Здесь вам нужно выбрать "Show SVG code". И тогда у вас откроется код в браузере. Вам просто нужно будет будет скопировать его, и заключить его внутрь тега ‘svg’ в вашем html документе,  и это все. Просто не так ли?

SVG - saving from Adobe Illustrator
SVG - Show code from Adobe Illustrator

Вы также можете использовать Иллюстратор для создания контуров. Просто нарисуйте линию в иллюстраторе, используйте ‘d’-атрибут для данных, как мы описывали ранее. Например для контур, который с создал для текста 'webdesigntuts+' выше, я создал в иллюстраторе, а потом экспортировал в мой документ.

Затем вы можете использовать стили или поменять расположение svg элемента в вашем документе, используя методы CSS. Вы также можете поместить их внутрь тега ‘a’ и создать ссылку, или использовать с ним JavaScript, чтобы добавить больше функциональности.

Заключение

Теперь это только вопрос времени, когда ретина-дисплеи и высокая плотность пикселей появится на каждом устройстве и каждом экране, которыми мы пользуемся, и технологии будут идти только вперед. Используя SVG мы можем создавать масштабируемую графику, и всегда будем готовы к экранам будущего, даже если их разрешения будут еще выше. Конечно, использование SVG не является выходом в любой ситуации, но для иллюстрации основанных на векторном формате, это определенно лучший выход.

Дополнительные Источники

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.