SVG для разработчиков: понимание основ, преимуществ и недостатков

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

Возможно, вы хорошо знакомы с использованием различных типов файлов растровых изображений: JPG, PNG и GIF. Давайте немного вспомним. Благодаря поддержке 256 цветов (8 бит) формат GIF (Graphic Interchange Format) является выдающимся форматом для анимации и прозрачности, не включая альфа-прозрачность. Формат PNG (Portable Network Graphics) намного лучше благодаря поддержке более 16 миллионов цветов (24 бита) и всех типов прозрачности, если вам не нужна анимация.

Наиболее широко используемый формат изображения в Интернете JPG или JPEG (Joint Photographic Experts Group), в основном благодаря возможности сжатия, поддерживает более 16 миллионов цветов; 24 бита или 8 бит на пиксель для оттенков серого, но без поддержки анимации или прозрачности. Следовательно, JPG является основным графическим форматом, который разработчики используют для статических фотографий. Я не упомянул Bitmap (BMP), так как обычно это не формат изображения для Интернета. BMP хранит точные данные о каждом пикселе изображения, что делает файлы очень большими (более чем в 150 раз больше, чем JPG при том же разрешении) и неидеальными для веб-графики.

Эти графические форматы, зависящие от разрешения, великолепны, в основном при правильном использовании. Однако все они имеют общий недостаток, который привел к появлению SVG — единственного формата векторных изображений для Интернета.

Что такое СВГ?

Скалярная векторная графика (SVG) — это формат изображения на основе расширяемого языка разметки (XML), который описывает двумерную графику, такую ​​как контуры, линии, круги, узоры, цвета текста и т. д. В более простом определении это относится к формату изображения. с поддержкой двух измерений, все поведение и существование которых контролируется текстовым файлом XML.

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

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

Как создавать SVG-изображения

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

Мы используем графические элементы SVG для создания изображений SVG в текстовом редакторе. Процесс заключается в том, чтобы просто вставить ваши графические элементы в теги <svg> и </svg>, указав их координаты, размер, цвет и т. д. Например, элемент <rect> можно использовать для рисования прямоугольника, как показано на следующий пример.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Приведенный выше код нарисует синий прямоугольник 300x на 300 пикселей в самом верхнем левом углу вашего браузера, если он сохранен как файл .svg и открыт в браузере. Теперь вам может быть интересно, почему у нас в документе две высоты и две ширины. Давайте разберемся во всем коде, чтобы понять, почему. Как упоминалось ранее, ваш код SVG должен быть написан внутри корневого элемента (<svg> и </svg>), чтобы уведомить ваш браузер о том, как интерпретировать эти строки.

Как и в HTML, SVG требует объявления пространства имен в корневом элементе. В приведенном выше примере мы предоставили параметр xmlns «http://www.w3.org/2000/svg», а W3C рекомендовал SVG версии 1.1 в корневом элементе. Измерение внутри корневого элемента называется точкой обзора SVG, которая представляет собой окно или холст, через который будет отображаться изображение SVG, нарисованное в корневом теге. Точка обзора должна иметь по крайней мере тот же размер, что и все ваши объекты SVG, прежде чем они смогут появиться в вашем браузере.

Вторую строку легче понять. Элемент <rect>, который используется для рисования прямоугольников, воплощает параметры предлагаемого прямоугольника, начиная с размера. Ширина штриха описывает толщину линии, а две цветовые модели RGB сообщают браузеру, каким цветом залить прямоугольник и линию соответственно. Это довольно просто, верно?

Теперь мы можем перемещать прямоугольник внутри страницы, объявив значения для x и y следующим образом:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Конечно, мы не забудем увеличить размер точки обзора, чтобы разместить дополнительное пространство, которое это займет.

Самый простой способ создать изображения SVG — использовать инструменты рисования, такие как Adobe Illustrator, Inskape и Sketch. Вместо создания с нуля некоторые библиотеки JavaScript, такие как Bonsai.js и D3.js, являются хорошими источниками изображений SVG, если вы ищете значки, сложные формы и т. д.

Добавление изображений SVG

Одним из преимуществ использования изображений SVG является простота их интеграции в ваш дизайн. Вы просто ссылаетесь на них в атрибуте src тега img. Это должно относиться к файлу .svg, сохраненному в папке вашего веб-сайта, например:

<img src='example.svg'>

Кроме того, вы можете вставить коды SVG в свой HTML-документ с тегами <svg></svg>, начинающимися и заканчивающими код, как уже упоминалось ранее.

Вы также можете обратиться к изображению SVG в своем CSS для фонового изображения, например:

.main-header {
background-image: url(example.svg);
}

Преимущества использования SVG для разработчиков

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

Вот некоторые из преимуществ:

Масштабируемость и отзывчивость

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

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

Чрезвычайно гибкий и поддерживает анимацию

В отличие от растровых изображений, которые представляют собой окончательную копию изображения, изображения SVG полностью доступны для редактирования путем корректировки кодов с помощью текстового редактора или специальных инструментов рисования. Используя имена классов или идентификаторы ваших элементов SVG, вы можете стилизовать или анимировать свои изображения SVG с помощью CSS. Анимация изображений SVG также возможна с помощью Web Animation API, SMIL или WebGL.

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

SEO-дружественный и небольшой размер файла

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

SVG загружается намного быстрее, поскольку у него нет файла для загрузки и нет необходимости в HTTP-запросе. Улучшение разрешения файла растрового изображения означает увеличение количества точек (пикселей). Это увеличит размер изображения, что увеличит время загрузки вашего сайта. Это далеко не тот случай, когда вы используете SVG. Как изображение, созданное с использованием набора инструкций и координат, размеры файла SVG невероятно малы (при оптимизации) по сравнению с любым другим типом файла изображения. Это приводит к более быстрому времени загрузки, повышению производительности страницы, более высокому рейтингу в поисковых системах, при этом улучшая взаимодействие с пользователем. Для получения дополнительной информации об этом посетите веб-сайт SEO Consultant London.

SVG имеет собственную объектную модель документа.

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

SVG — формат файлов изображений будущего

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

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

До того, как 16 августа 2011 года W3C представила SVG 1.1 (вторая редакция), которая потенциально находится на рассмотрении для более новой версии, SVG 1.0 и 1.1 (первая редакция) уже изменили способ обработки изображений в Интернете. Это обещание чего-то более ценного, чем обычный формат растрового изображения, который все еще очень полезен в нашем нынешнем состоянии веб-программирования. SVG — не лучший формат изображения во всех случаях. Ожидается, что в последующих версиях SVG будут устранены некоторые недостатки SVG; будут обсуждаться далее в этой статье.

Когда использовать формат изображения SVG

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

1. Логотипы и иконки
2. Интерактивные изображения, такие как диаграммы, графики, карты, инфографика
3. Анимации
4. Интерфейсы приложений
5. Простые схемы и иллюстрации
6. Специальные эффекты, такие как липкость или изменение формы
7. Ненавязчивые произведения искусства и простая графика

Недостатки SVG для разработчиков

SVG поддерживается не всеми браузерами: старые браузеры обрабатывают SVG так же, как устаревшая Windows XP обрабатывала бы флэш-накопители или камеру Canon EOS 5DSr, когда вы пытаетесь их подключить. Короче говоря, SVG не работает в старых браузерах; IE8 и ниже. Однако, учитывая, что устаревшие браузеры на самом деле не являются частью какого-либо будущего дела, в сочетании с тем фактом, что лишь немногие люди все еще используют их, это не является серьезной причиной не использовать SVG.

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

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

Вывод

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

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

Сообщите нам, как вы используете SVG, и о других интересных советах, которые здесь не представлены.