Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
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
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.