top of page
  • Writer's pictureSarov+

Как упаковывать SVG-картинки для VUE-компонентов

Updated: Feb 17

SVG image integration

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


GUI

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


А узнать больше про интеграцию SVG-изображений в компоненты VUE можно в нашем видео:


Основная задача

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


what does the project look like

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


Vector graphics

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


Стандартный подход

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


designer at work

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


creating a project

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


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


Как выглядит иконочный шрифт

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


Icon font

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


flexibility in use

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


Проблема стандартного подхода


The problem with the standard approach

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


integration

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


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


Решение

Для решения проблемы, связанной с ограничениями некоторых платформ, таких как Dynamics CRM, в использовании определенных файлов, мы применили уникальный подход. Сначала мы скачали необходимые файлы шрифтов. Затем эти файлы были преобразованы в формат base64 - универсальный способ кодирования бинарных данных в виде текста. Этот формат позволяет загружать файлы непосредственно через URL, используя функцию URL.


Convert to base64

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


integration via URL

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



Главный минус нашего решения

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


significant size of the resulting files






Такой объем данных оказывает негативное влияние на производительность веб-приложений. Примером может служить разработка компонента на Angular для планировщика задач (scheduler), где заметно замедление загрузки приложения из-за объемных шрифтов, подключенных в формате base64. Это приводит к увеличению времени ожидания для пользователя, что может негативно сказаться на пользовательском опыте и восприятии всего веб-приложения в целом.


integration of fonts into web resources

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


Финальное решение

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


XML SVG file

Ключевым аспектом оказалось использование тега <path> из XML SVG-файла. Обернув этот тег HTML-тегом <svg>, мы получили возможность встраивать иконки непосредственно в HTML. Это было настоящим прорывом. Теперь, вместо того чтобы полагаться на традиционные методы, мы начали использовать этот подход в наших проектах, превращая HTML-код в компоненты и используя их многократно.


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


No quality loss

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


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

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


Advantage

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


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


Change SVG color

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


Q&A

Вопрос: Содержит ли иконочный шрифт только одну иконку?

Ответ: Нет, иконочный шрифт представляет собой набор иконок. Каждая иконка в шрифте соответствует определенному символу, аналогично буквам в обычных шрифтах.


The designer's search for a solution

Вопрос: Как иконка привязывается к конкретному символу в иконочном шрифте?

Ответ: Каждая иконка в иконочном шрифте соответствует определенному порядку символов. Это похоже на обычные символьные шрифты, где каждый символ (например, 'а', 'б', 'в') представляет собой уникальное описание векторов.

 

Вопрос: Поддерживает ли Dynamics CRM загрузку таких шрифтов?

Ответ: Dynamics CRM имеет ограничения на загрузку веб-ресурсов с определенными расширениями, из-за чего стандартные иконочные шрифты могут не поддерживаться.

 

Вопрос: Каков объем файла шрифта, преобразованного в base64?

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


Вопрос: Как можно преобразовать файлы в base64?


How can I convert files to base64?

Ответ: Для преобразования файлов в base64 можно использовать онлайн-конвертеры, например, Browserling (https://www.browserling.com/). Это позволяет загружать и использовать различный контент в веб-ресурсах.

 

Вопрос: Можно ли автоматически масштабировать SVG-изображения?

Ответ: Да, SVG-изображения могут масштабироваться автоматически без потери качества. Размер SVG можно изменять, и оно будет соответствовать размеру контейнера, не превращаясь в пиксели или квадратики.

 

Заключение

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


web design field

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

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


creating an app

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


Рекомендации

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

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

  • Использование Инструментов для Конвертации: Для преобразования иконок и шрифтов в формат base64 используйте надежные онлайн-конвертеры. Это упростит процесс и поможет избежать ошибок.

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

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

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

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

  • Обучение и Эксперименты: Следите за последними трендами в веб-разработке и экспериментируйте с новыми технологиями. Это поможет вам оставаться в курсе лучших практик и предложить новаторские решения в ваших проектах.


4 views0 comments

Comments


bottom of page