Руководство по формату изображения масштабируемой векторной графики (SVG)

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

Мы объясним подробнее позже, но SVG — это набор данных, который представлен в виде изображения во внешнем интерфейсе. Это означает, что вы можете использовать каскадные таблицы стилей (CSS) для управления изображением. Более того, вы можете изменить его размер по мере необходимости без потери качества.

В этом посте мы поговорим больше о масштабируемой векторной графике и о том, как они могут вам помочь. Мы также обсудим, как включить их на ваш сайт WordPress.

Краткий обзор наиболее распространенных форматов веб-изображений

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

• Объединенная группа экспертов по фотографии (JPEG). Как следует из названия, если вы хотите отображать фотографии, сделанные цифровой камерой, этот формат для вас.
• Переносимая сетевая графика (PNG). Вы захотите использовать формат PNG для отображения любой созданной графики, например, из Adobe Illustrator.
• Формат обмена графикой (GIF). Эй, всем нравятся забавные отрывки из телешоу, которые можно использовать в качестве реакции в социальных сетях! GIF — это идеальный формат для анимированной графики, которая также является переносимой.

Хотя некоторые выберут любой формат, который им нравится, это не будет оптимальным подходом. Например, если вы решите сделать каждое изображение GIF, вы можете увидеть астрономические размеры файлов и низкое качество изображения. Напротив, вы не захотите использовать JPEGS для графики, потому что PNG является более оптимальным форматом.

Что такое формат масштабируемой векторной графики

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

Масштабируемой векторной графики не существует (вроде). На самом деле это вовсе не графика или изображение, а форма расширяемого языка разметки (XML). Для тех, кто не знает, это близкий брат HTML, но без некоторых аспектов этого языка (таких как предопределенные теги).

В качестве сравнения, которое вы, возможно, уже поняли, рассмотрим, как можно создавать фигуры с помощью CSS. Это то, о чем мы поговорим подробнее в ближайшее время. Что ж, представьте, что этот CSS встроен в оболочку документа, которую вы вызываете, используя стандартный формат файла и структуру (например, image.svg ).

Точнее будет сказать, что, поскольку HTML предоставляет основу для определения заголовков, абзацев, разделов, списков и т. д., SVG предоставляет основу для определения таких фигур, как круги и прямоугольники. Однако это все равно не объясняет, почему у нас есть (а иногда и нужен) формат SVG. Мы поговорим об этом далее.

Почему у нас есть SVG

До SVG вы использовали PNG для отображения графики. Ранние изображения в Интернете могли быть GIF, но в целом PNG являются доминирующим форматом изображений. Вопрос не столько в том, «Зачем нам SVG?», сколько в том, «Что не хватает современным форматам изображений, что решит SVG?» Ответ: динамизм.

Если вы посмотрите на основные форматы веб-изображений, два из них не очень подходят для созданной графики (JPEG и GIF). Это оставляет PNG, чтобы взять на себя нагрузку. Однако у PNG есть несколько проблем, которые только сейчас стали очевидны для современной сети:

• Они статичны, поскольку вы создаете изображение в автономном режиме и экспортируете его в этом конкретном формате. Это означает, что он несколько негибкий.
• Кроме того, вы не можете изменить «макияж» изображения. Учитывая, что у нас есть ряд устройств для создания и отображения, иногда вам нужно адаптироваться к этим «окнам просмотра». Приложите усилия, чтобы создать логотип всех размеров только для настольных компьютеров и основных мобильных устройств с использованием PNG.
• Хотя PNG могут быть легкими, дизайнер и владелец сайта несут ответственность за оптимизацию изображения. PNG может быть тяжелым, иногда больше мегабайта, без какой-либо оптимизации.

Кроме того, PNG заполнили часть пробела в то время, когда было мало вариантов, которые могли бы обеспечить достаточно высокое качество изображения. В то время CSS был в зачаточном состоянии, и у нас еще не было такого масштаба дизайна и разработки, как сейчас.

Например, мы смогли использовать свойство border-radius только с 2010 года. Это позволяет вам определять круглые края и даже круги. Вы часто увидите его в действии на кнопках:

Вы будете использовать CSS для создания фигур, которые можно масштабировать и адаптировать к экрану, но масштабируемая векторная графика может больше. На самом деле, теперь для этого вы будете использовать SVG, а не CSS, хотя они тоже не панацея.

Плюсы масштабируемой векторной графики

Как и любой другой формат изображения, масштабируемая векторная графика не идеальна. Плюсов конечно много:

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

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

Недостатки масштабируемой векторной графики

Однако не все так радужно. У SVG все еще есть некоторые проблемы, о которых вам следует знать:

• Технология развивается, в отличие от большинства других основных веб-аспектов. Поскольку многие люди многого ожидают от масштабируемой векторной графики, существует «разрыв» между тем, что вы можете сделать, и тем, что вы хотите сделать.
• Хотя базовая поддержка SVG доступна в большинстве браузеров, полный набор функций по-прежнему недоступен в зависимости от используемого вами браузера. Опять же, у SVG есть больший потенциал, который еще не очевиден: нам нужна лучшая поддержка браузера для более продвинутой функциональности, чтобы увидеть, на что способен этот формат.
• В некоторых случаях вы можете обнаружить, что изображения SVG менее точны или просто выглядят неправильно. Это потому, что вы должны полагаться на загрузку сайта, как вы ожидаете. Если вы помните время, когда вам приходилось перезагружать веб-страницу из-за ошибок, представьте, что это происходит только с вашими изображениями SVG.

Мы бы также сказали, что в некоторых случаях сложнее создавать SVG без знаний программирования. Гораздо лучше поддержка в графических программах, таких как Affinity Designer и Adobe Illustrator. Также поддерживается экспорт SVG в таких приложениях, как Google Drawing:

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

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

Как использовать SVG на вашем сайте WordPress

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

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

В других местах в Интернете вы найдете инструкции по добавлению кода в файл functions.php, чтобы включить загрузку SVG. Однако мы не собираемся выполнять этот шаг, потому что не можем гарантировать его безопасность. Вместо этого вы можете сделать то, что вы часто делаете с WordPress: обратиться к плагину. Мы рекомендуем поддержку SVG:

После установки и активации плагина перейдите на экран «Настройки» > «Поддержка SVG» в WordPress. Это покажет вам несколько экранов, но вам нужно только поставить галочку « Ограничить администраторами? ». флажок на панели настроек.

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

В итоге

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

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

Хотите ли вы использовать масштабируемую векторную графику на своем веб-сайте, и если да, то поможет ли вам эта статья? Дайте нам знать в комментариях ниже!

Изображение предоставлено: GDJ.