Векторная графика широко применяются в печатных СМИ. В веб-сайт, мы также можем добавить векторную графику SVG (Scalable Vector Graphic). Ссылаясь на официальную спецификацию на W3.org , SVG описывается как язык для описания двухмерной графики в XML. SVG позволяет создавать векторных графические фигуры (например, контур, состоящий из прямых линий и кривых), изображения и текст.
Преимущества SVG
SVG предлагает несколько преимуществ по сравнению с растровой графикой, вот некоторые из них:
Масштабируемость
Растровое изображение состоит из пикселей и при изменении масштаба теряет свое качество, в то время как векторная графика сохраняет свои пропорции независимо от масштаба.
Ускорение HTTP-запроса
SVG-файл может быть встроен непосредственно в HTML-документ при помощи тега svg , поэтому браузеру не нужно делать запрос. Это приводит к лучшей производительности и меньшей нагрузке на сайте.
Стилизация и сценарии
Вложения тега svg непосредственно в HTML-документ также позволяет нам легко установить графические стили при помощи . Мы можем изменить свойства объекта, такие как цвет фона, прозрачность границ, и т.д. Кроме того, мы также можем манипулировать графикой при помощи .
Изображения могут быть анимированы и редактируемыми
SVG-объект может быть анимирован, если использовать анимацию элемента при помощи css или JavaScript (JQuery). SVG-объект может быть отредактирован любым текстовым редактором или графическим векторным редактором, например Inkscape или Adobe Illustrator .
Меньший размер файла
SVG имеет меньший размер файла по сравнению с растровым изображением.
Создание простых фигур при помощи SVG
Согласно спецификации, мы можем создать некоторые базовые фигуры, такие как прямоугольники, круги, линии, эллипсы, ломаные линии и многоугольники при помощи SVG и для того, чтобы браузер для отображал SVG- графику, все эти графические элементы должны быть вставлены в тег тег. Давайте посмотрим на примеры ниже:
Линия
Чтобы нарисовать линию
в SVG можно использовать элемент
Как вы можете видеть выше, точка начала координат линии выражается с первыми двумя атрибутами x1 и x2 , а конечной точкой линии координат выражены с y1 и y2 .
Есть также два других атрибута, stroke и stroke-width , которые используются для определения цвета и ширины границы. Кроме того, мы также можем определить эти атрибуты в встроенный стиль:
Style="stroke-width:1; stroke:rgb(0,0,0);"
она в конечном итоге просто делает то же самое.
Ломаная линия
Этот элемент похож на
Прямоугольник
Рисование прямоугольника также просто с этим
Круг
Мы также можем нарисовать круг с
В первых двух атрибутов, cx и cy определяют координаты центра круга. В приведенном выше примере, мы создали 102 как для x и y координаты, если эти атрибуты не указаны, 0 будет рассматриваться как значение по умолчанию.
Эллипс
Мы можем нарисовать эллипс при помощи тега
Многоугольник
При помощи элемента
Использование векторного графического редактора
Как вы можете видеть, используя простые объекты SVG в HTML-документе довольно легко. Однако, когда объект становится более сложным, этот способ уже не идеален.
К счастью, как мы уже упоминали выше, мы можем использовать векторный графический редактор, например Adobe Illustrator или Inkscape .
Если вы работаете с Inkscape, вы можете сохранить ваши векторной файлы в SVG-формате, а затем открыть его в текстовом редакторе кода. Скопируйте все коды и вставлять их в ваш HTML-документ.
Вы можете вставлять.svg -файлы при помощи тегов embed , iframe и object , например;
Результат в конечном итоге будет тот же.
*В этом примере мы используем изображение
Поздравляю всех с Днём Победы! А сегодня я пишу первую статью из серии, в которой мы узнаем, что такое SVG и как его использовать .
SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML . Данная технология постепенно набирает обороты, а связано это вот с чем:
- При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
- Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
- Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
- Можно редактировать или анимировать с помощью CSS и JavaScript
- Меньший размер
Итак, зачем он нужен и почему лучше обычного изображения, думаю, вы уже поняли, а теперь перейдём к тому, как его использовать.
Для начала стоит отметить, что все наши фигуры должны быть в теге svg , а теперь давайте нарисуем линию . Для отображения линии служит тег line , который имеет следующие атрибуты:
- x1 - Начальная x координата
- x2 - Конечная x координата
- y1 - Начальная y координата
- y2 - Конечная y координата
- stroke-width - Ширина линии
- stroke - Цвет линии
Но что, если нам нужно нарисовать сразу несколько линий ? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline .
У тега polyline есть атрибут points , где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill , в котором мы можем указать цвет в любом из форматов css , которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none .
Перейдём к более сложным фигурам и нарисуем прямоугольник .
Для того, чтобы нарисовать прямоугольник, нужно использовать тег rect , где в атрибутах width и height указать ширину и высоту соотвественно, а остальные атрибуты вам уже знакомы и выполняют абсолютно те же функции, что и с линиями.
Для отрисовки круга служит тег circle и атрибуты cx , cy и r для задания координат центра круга и его радиуса .
Другой элемент - эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y . Для его отрисовки служит тег ellipse
Если вам нужно выводить многогранные фигуры , такие как пятиугольник, то воспользуйтесь тегом polygon
Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline .
Если объект очень сложный, то вы можете воспользоваться любым редактором векторной графики и нарисовать его там, а затем просто вставить вот таким образом
SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5 , Google Chrome с 3.0 и оперой с 8.0 .
На этом статья подошла к концу. Получилась она большой, но простой. В следующей мы продолжим изучать эту интересную технологию, а на этом всё. Удачи!
SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики , разработанный консорциумом W3C.
SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.
SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.
Последней версией полной спецификации является SVG 1.1.
SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.
Достоинства SVG
- Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
- Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
- SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
- Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
- Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
- В SVG изображение можно добавить несколько ссылок.
- К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.
Вставка SVG на Web-страницу
SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу (при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить SVG-код в файле с расширением .svg .
Итак, способы вставки SVG-изображения на Web-страницу:
- прямая вставка кода в HTML-документ в контейнере ;
- использование SVG-файла в качестве фонового изображения;
- подключение SVG-файла в HTML-документ с помощью тегов img , embed , object и iframe ;
- подключение SVG-файла в PHP-документ с помощью функции include .
1. Прямая вставка SVG-кода в Web-документ
2. Использование SVG-файла в качестве фонового изображения
3. Подключение SVG-файла с помощью тега img
