SVG: создавайте графику HTML5, которая работает в любом браузере

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальную плату за некоторые услуги, которые мы рекомендуем на этой странице.


При работе с изображениями в Интернете важно использовать правильный тип файла для ваших целей. Хотя форматы, такие как JPG, PNG и GIF, наиболее знакомы веб-пользователям, они не всегда могут быть подходящим выбором.

Эта статья познакомит вас с основами другого типа графического формата: SVG или Scalable Vector Graphics..

SVG: масштабируемая векторная графика

Векторные и растровые форматы изображений

В мире графических файлов существует два основных типа формата: растровый и векторный. Растровые форматы основаны на пикселях. Эти форматы включают в себя такие типы файлов, как JPG, PNG и GIF.

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

Вы можете определить, является ли изображение растровым (или растровым) изображением, просто взглянув на него поближе и (обычно) в увеличенном масштабе. Если вы видите миллионы крошечных квадратов с достаточно высоким разрешением (особенно в местах, где один цвет меняется на другой), вы смотрите на пиксели, и, таким образом, это растровое изображение.

С другой стороны, векторная графика основана на линиях и кривых, хранящихся в текстовом XML. Они в значительной степени основаны на математической теории и, как следствие, требуют специальных компьютерных программ для создания, открытия и редактирования..

Поскольку векторные изображения являются иллюстрациями, они не подходят для фотографий. Однако изображение, созданное художником на основе фотографии, можно создать в SVG. Логотипы, вероятно, являются основным использованием SVG в Интернете, наряду с другими иллюстрациями, характерными для бренда..

Шрифты и гарнитуры также создаются в векторных форматах, чтобы края символов были четкими и чистыми. Если вы когда-либо пытались добавить текст поверх растрового изображения в Photoshop или каком-либо другом приложении для редактирования изображений, например, чтобы создать заголовок веб-сайта, то пытались изменить его размер даже немного, возможно, вы заметили, что текст может иногда выглядят потрепанными по краям.

Это из-за различий между векторным и растровым форматами; формат SVG это путь сюда.

Преимущества SVG

SVG – это, как и следовало ожидать от названия, векторная графика. Они не зависят от разрешения. Сравните это с растровой графикой, которая зависит от разрешения монитора или экрана, на котором они отображаются.

Поэтому при увеличении растровой графики – например, файла JPG или PNG – вы увидите, что изображение становится все более размытым и искаженным.

В формате SVG вы не будете. Вы можете увеличивать и увеличивать масштаб без искажения самого изображения.

Это стало возможным благодаря природе формата SVG. Поскольку оно основано на тексте, а не на пикселях, вы можете изменить размер изображения без потери целостности или четкости деталей..

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

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

SVG поддерживает анимацию для каждого элемента и аспекта изображения. Поскольку они основаны на тексте, они также доступны для поиска и индексации, а также сжимаемы.

Недостатки SVG

Есть один основной недостаток использования файлов изображений в формате SVG, и это совместимость. Вам нужно программное обеспечение, которое может работать с SVG.

Некоторые из этих программ, такие как Adobe Illustrator, не сразу доступны для всех, кому может понадобиться работать с этими изображениями, в отличие от множества редакторов (многие из которых бесплатны), доступных для работы с растровыми изображениями..

Тем не менее, Inkscape – это бесплатный редактор с открытым исходным кодом, который может обрабатывать файлы SVG..

Другие расширения векторного формата

В дополнение к SVG (масштабируемая векторная графика), основные расширения векторных файлов включают в себя:

  • .drw (векторный файл)
  • .eps (инкапсулированный PostScript)
  • .pct (формат растровой графики Macintosh)
  • .pif (векторное изображение в формате GDF)
  • .PS (Adobe PostScript)
  • .SVF (простой векторный формат)

Элементы SVG в HTML5

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

Линия

Элемент может быть использован для создания одной прямой линии, состоящей из двух точек – начала и конца. Каждая точка, конечно, будет иметь две координаты: «х» и «у».

Код будет выглядеть так:

Вы также можете связать другие атрибуты с < линия > элемент: обводка определяет цвет, а ширина обводки контролирует толщину линии.

Rect

Создайте прямоугольник, используя элемент и указав размеры с атрибутами width и height. Вы также можете предоставить цвет с заливкой и для контура прямоугольника с обводкой, как показано в фрагменте кода ниже:

Круг

Как и следовало ожидать, элемент создает круг. Чтобы создать круг с радиусом 40 (задается с помощью атрибута r) с центром в 40 пикселей вниз и в 40 от верхнего левого угла, зеленой заливкой и черным контуром, используйте код ниже:

Если вы не укажете атрибуты cx и cy, браузер интерпретирует значение по умолчанию «0».

Другие элементы, с которыми вы можете поиграть, включают, и .

Поддержка браузера

SVG хорошо поддерживается во всех основных доступных браузерах, кроме IE8 и более ранних версий.

Как насчет SWF?

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

Благодаря поддержке Flash в пользу HTML5, CSS, JavaScript и SVG очень важно, чтобы веб-профессионалы понимали различия между SVG и SWF и учились использовать современные технологии..

Что такое SWF?

SWF – это сокращение, обозначающее Small Web Format. Это формат файла Adobe Flash, который можно использовать для графики, анимации и встроенных виджетов апплета. Плагин Flash должен быть установлен в браузере, чтобы содержимое SWF отображалось.

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

Сходства и различия между SVG и SWF

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

SVG – открытый стандарт

Стандарт SVG был разработан Консорциумом World Wide Web (W3C) и, как следствие, является полностью открытым и бесплатным для использования и развития. SWF, с другой стороны, является проприетарным форматом Flash, принадлежащим Adobe. В 2008 году Adobe сняла многие ограничения на использование SWF, но SWF остается закрытым форматом..

С SVG работать проще

Код SVG – это читаемый человеком текст в формате XML. SVG могут быть созданы с помощью любого текстового редактора, а создание простых SVG легко и легко может быть изучено любым, кто знаком с веб-языками, такими как HTML, CSS и JavaScript. SWF-файлы должны создаваться и редактироваться с помощью сложных программ, таких как Adobe After Effects, или альтернатив с открытым исходным кодом, таких как Motion-Twin ActionScript 2 Compiler..

Кроме того, создание сценариев SVG для анимации и интерактивности можно выполнять с помощью CSS и JavaScript – языков, с которыми каждый веб-дизайнер и разработчик работают ежедневно. С другой стороны, SWF-файлы написаны с использованием Adobe ActionScript, который похож на JavaScript, но не идентичен, и большинство разработчиков работают с ним гораздо реже..

Добавить SVG на веб-сайт также просто, как вставить код в HTML-документ в соответствии с другими HTML-элементами. Кроме того, SVG могут быть встроены в документ HTML. SWF-файлы должны быть встроены в HTML-документ.

SVG лучше для SEO

Поскольку SVG написаны в виде простого текста, они могут быть прочитаны и проиндексированы поисковыми системами. SWFs, с другой стороны, являются двоичными файлами, которые трудно интерпретировать поисковым системам. В результате, если вы используете SVG или SWF для доставки контента, вам лучше использовать SVG, если трафик с поисковых систем важен для вашего веб-сайта..

Поддержка SVG растет

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

Оба SVG и SWF поддерживают несколько типов медиа

Звуковой и видео контент может быть встроен непосредственно в файл SWF. SVG не включает поддержку звука и видео контента. Однако другие функции HTML5 поддерживают аудио и видео контент, и эти функции могут быть встроены непосредственно в SVG. В результате аудио и видео могут быть встроены в SVG, но воспроизведение выполняется другими игроками, а не самим стандартом SVG..

SWF Резюме

В то время как основанная на Flash графика управляла Интернетом в прошлом, будущее принадлежит SVG, анимированному с помощью CSS и JavaScript. Следующие ресурсы помогут веб-дизайнерам и веб-мастерам постоянно совершенствовать свои навыки и начать использовать SVG в своих проектах..

SVG Resources

Есть много бесплатных статей, учебных пособий и руководств, которые помогут вам начать работу с SVG. Вот некоторые из лучших.

Изучите основы

Если вы только начинаете работать с SVG, ознакомьтесь с этим учебным пособием от Creative Bloq для создания простых фигур и использования заливок и градиентов. Второй вариант, который охватывает множество основных методов, – это руководство по началу работы с SVG от Envato Tuts.+.

Используйте графическое программное обеспечение для создания SVG

Если вы собираетесь создавать что-то более сложное, чем простые фигуры, вам нужно работать с программой векторной графики, такой как Adobe Illustrator, которая может экспортировать файлы в формате SVG. Это краткое руководство по CSS-Tricks покажет вам, как использовать Illustrator для создания анимационного объявления, использующего только HTML и CSS. Еще один замечательный ресурс для изучения того, как использовать иллюстратор для создания SVG-файлов, – это хранилище веб-дизайнеров..

Если у вас нет доступа к Adobe Illustrator, вам не повезло. Inkscape – это программа для работы с векторной графикой профессионального качества, бесплатная и с открытым исходным кодом. Inkscape также предлагает множество отличных учебных пособий, которые помогут вам начать работу с программой и покажут, как экспортировать ваши творения в формате SVG..

Изучите передовые техники SVG

Если вы действительно хотите освоить SVG, вам нужно потратить некоторое время на изучение двух ресурсов:

  • Учебник по SVG от сети разработчиков Mozilla.
  • Учебник по SVG для современных браузеров, бесплатная электронная книга от W3C.

Оба эти ресурса обширны и охватывают весь спектр современного мышления и практики в отношении программирования SVG. Эти ресурсы не для начинающих, но если вы знакомы с HTML и CSS и хотите научиться работать с SVG, то вы готовы принять их на.

Создание SVG-анимации

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

  • Учебник от Дэвида Уолша по созданию SVG-анимации с использованием CSS и JavaScript.
  • Обширное руководство от Jenkov, охватывающее все аспекты работы с SVG, включая CSS-анимацию и JavaScript-скриптинг.
  • Список восьми ведущих библиотек JavaScript для создания анимации SVG от Hongkiat.

Дополнительные ресурсы

  • Учебное пособие по SVG для Mozilla Developers Network: учебное пособие, в котором рассматриваются все аспекты формата SVG для использования в браузерах Mozilla.
  • Простое введение в анимацию SVG: отличный учебник, написанный Дэвидом Уолшем.
  • ImageMagick Введение и ресурсы: коллекция графических инструментов, в том числе некоторые для PostScript.

Вывод

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map