Свои SVG-иконки Shopify: подготовка фирменного знака

Собственную SVG-иконку можно добавить в тему Shopify двумя практичными способами: загрузить файл как ресурс темы и показать его тегом изображения либо поместить разметку в фрагмент Liquid и отобразить его там, где нужна иконка. Первый способ проще для знака с фиксированными цветами. Второй даёт прямой контроль над контурами и цветом. Набор настроек редактора зависит от темы, поэтому перед изменением кода изучите её существующие блоки иконок.

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

Выберите место для иконки

В темах Shopify есть каталог assets для файлов и каталог snippets для повторно используемой разметки Liquid. Shopify описывает оба в архитектуре тем и рекомендует проверить настройки редактора темы перед правкой кода в руководстве по коду темы. Теме с полем для собственного SVG может не понадобиться ни один из приведённых ниже способов с кодом. Наличие поля в одной теме не означает, что оно есть во всех.

Два способа добавления

Это различие важно, потому что CSS страницы не может обращаться внутрь SVG, загруженного обычным <img>. Встроенные контуры могут использовать currentColor, который берёт значение из CSS-свойства color. См. руководство MDN по SVG в контексте изображения и объяснение currentColor. Более общие браузерные примеры приведены в статье встроенный SVG и тег изображения.

Подготовьте SVG до изменения темы

Начните с самого простого полезного варианта фирменного знака. Для иконки сохраните силуэт и намеренные отверстия в размере, который покупатели действительно увидят. Тонкие буквы или текстура, хорошо выглядящие на монтажной области, могут слиться при 20–32 пикселях. Сохраните фирменный исходник как оригинал; сделайте отдельный экспорт иконки.

1. Найдите качественный исходник. Экспортируйте SVG из исходного векторного дизайна, если он есть. Если сохранился только плоский PNG, PerfectVector поможет с этим шагом: создайте вариант SVG в процессе преобразования клипарта в SVG, затем откройте скачанный файл в векторном редакторе. Сравните силуэт и отдельные фигуры с PNG. Трассировка — отправная точка, а не обещание идентичной геометрии.
2. Проверьте структуру. Убедитесь, что видимый знак состоит из контуров или базовых векторных фигур, а не одного прямоугольника со встроенным растровым <image>. Удалите случайные фоновые прямоугольники, лишние фрагменты, дублирующиеся контуры и крошечные цветовые области. Руководство по подготовке PNG-иконок разбирает согласованные сетки и оптический размер набора.
3. Настройте холст и цвета. Задайте экспорту viewBox с разумными отступами. Сохраните фиксированные фирменные цвета, если знак должен оставаться двухцветным. Если одноцветная иконка должна наследовать цвет темы, задайте нужным контурам currentColor. Статья изменение цвета SVG объясняет, почему жёстко заданная заливка может мешать последующей смене цвета.
4. Проверьте файл как код. Оставьте только элементы и атрибуты, необходимые иконке. Удалите неожиданные скрипты, внешние ссылки, служебные данные редактора и недоверенную разметку, прежде чем встроить её в тему. Откройте очищенный SVG в размере иконки и с увеличением для проверки; эти проверки выявляют разные ошибки.

Для небольшой одноцветной звезды исходник может быть таким простым. Контур ниже — собственный пример, а не иконка Shopify или результат преобразования PerfectVector. Он имеет явную систему координат и не содержит встроенного изображения:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

Двухцветный фирменный знак требует отдельных контуров или фигур с продуманными заливками. Замена всех цветов на currentColor уничтожила бы это различие. Если знак входит в более крупное семейство иконок, примените одинаковые правила размеров и цветов к нескольким характерным иконкам, прежде чем экспортировать остальные.

Способ A: отобразите ресурс темы

Фильтр Shopify asset_url возвращает CDN-адрес файла в каталоге assets темы. Добавьте проверенный SVG туда, затем укажите его точное имя в подходящем шаблоне, секции или фрагменте Liquid. Простой пример ниже предполагает, что brand-mark.svg — декоративный знак с фиксированными цветами рядом с видимым текстом:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Используйте описательный текст alt, если изображение передаёт информацию, которой нет в соседнем тексте. Для чисто декоративного изображения подходит alt="". Рекомендации Shopify по доступности тем рекомендуют атрибут alt у каждого изображения и пустое значение у декоративных иконок. Явные ширина и высота также резервируют место во время загрузки ресурса, как объясняют рекомендации Shopify по доставке ресурсов.

При таком способе SVG остаётся одним изображением с точки зрения страницы. Если цвет темы меняется, обновите заливки SVG или выберите встроенный вариант, не рассчитывая, что родительское CSS-правило перекрасит файл. Не вставляйте URL файла одного магазина в другую тему; пусть asset_url определяет адрес ресурса темы.

Способ B: отобразите встроенную иконку во фрагменте

Для повторяющейся одноцветной иконки поместите проверенную разметку SVG в фрагмент, например snippets/brand-mark-icon.liquid. Документация Shopify по фрагментам использует {% render %} для вставки повторно используемой разметки. Минимальный фрагмент может брать цвет из окружающего стиля текста:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Затем отобразите его в нужном файле темы:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Здесь aria-hidden="true" предназначен для иконки, которая лишь украшает соседний видимый текст. Если только иконка обозначает кнопку или ссылку, задайте доступное имя самому элементу управления, не полагаясь на декоративный SVG. Проверьте его с клавиатурой и программой чтения с экрана. Храните CSS-цвет и размеры в обычной системе стилей темы, не разбрасывая разовые встроенные значения.

Фрагмент можно использовать повторно, но он всё ещё является кодом темы. Shopify советует создать копию темы перед изменением кода. Внесите изменение в копию, просмотрите конкретную страницу или секцию и сохраните исходный фрагмент для сравнения после обновления темы. Библиотеки иконок отдельных тем могут иметь собственные аргументы и структуру; изучите эти файлы перед заменой встроенной иконки. Текущее обсуждение библиотеки иконок в Shopify Community показывает, почему отображение целой библиотеки не обязательно равно выбору одной иконки из неё.

Проверьте результат при конечном размере

Файл может быть технически корректным, но неправильно выглядеть в витрине магазина. Проверьте страницу на светлом и тёмном фоне, если тема их использует. Просмотрите знак в реальном CSS-размере, при узкой области просмотра и рядом с соседними иконками. Убедитесь, что отверстие остаётся открытым, контраст цветов достаточен, а viewBox или контейнер не обрезает иконку.

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

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

Частые вопросы

Можно ли загрузить SVG-иконку через экран Customize любой темы Shopify? Нет. Некоторые темы предлагают поле иконки или собственного SVG; другие требуют добавления ресурса или правки кода. Проверьте секции и документацию конкретной темы, прежде чем рассчитывать на такое поле.

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

Стоит ли преобразовать фирменную PNG-иконку в SVG перед добавлением? Преобразуйте плоскую пиктограмму, если ей нужны масштабируемые редактируемые контуры. Проверьте трассировку в нужном размере иконки и удалите лишние фигуры. Оставьте фотографию или текстурное изображение растровым, если трассировка отбросит определяющие его детали.

Источники

1. Shopify Developers — Theme architecture — Ресурсы темы, фрагменты и место размещения разметки.
2. Shopify Developers — asset_url — Поведение URL ресурса темы, использованное в примере Liquid.
3. Shopify Developers — Snippets — Повторно используемая разметка Liquid и тег render.
4. Shopify Help Center — Editing theme code — Начало с редактора, копирование темы и предосторожности при изменении кода.
5. Shopify Developers — Accessibility best practices — Альтернативный текст и обработка декоративных иконок.
6. Shopify Developers — Serve assets from Shopify CDN — Фильтры ресурсов и явные размеры изображений.
7. MDN — SVG as an image — Ограничения контекста изображения в браузере.
8. MDN — SVG color attribute — Как currentColor задаёт заливки и обводки SVG.