Ícones SVG no Shopify: prepare uma marca limpa

Um ícone SVG personalizado pode chegar a um tema Shopify de duas formas práticas: envie o arquivo como recurso do tema e exiba-o com uma tag de imagem, ou coloque sua marcação em um snippet Liquid e renderize-o onde o ícone deve aparecer. O primeiro caminho é mais simples para uma marca de cores fixas. O segundo dá controle direto sobre seus traçados e sua cor. Os controles disponíveis no editor de temas dependem do tema, portanto inspecione seus blocos de ícones existentes antes de mudar o código.

Se sua única origem é um PNG, primeiro crie um SVG baseado em traçados. Apenas renomear o arquivo não transforma pixels em formas. Um SVG original limpo é preferível quando você tem um; uma foto detalhada geralmente fica melhor como imagem. As etapas abaixo levam um pequeno pictograma de marca da preparação do arquivo à prévia do tema, sem presumir uma conta de lojista ou versão de tema específica.

Escolha onde o ícone deve ficar

Os temas Shopify têm um diretório assets para arquivos e um diretório snippets para marcação Liquid reutilizável. A Shopify documenta ambos em sua arquitetura de temas e recomenda conferir as opções do editor de temas antes de editar código em seu guia de código de temas. Um tema com campo SVG personalizado pode dispensar os dois caminhos de código abaixo. Um campo em um tema não significa que todos os temas o tenham.

Dois caminhos de entrega

A distinção importa porque o CSS da página não alcança o interior de um SVG carregado por um <img> comum. Traçados embutidos podem usar currentColor, que recebe seu valor da propriedade CSS color. Veja o guia de contexto de imagem SVG do MDN e sua explicação de currentColor. Para exemplos mais gerais no navegador, leia SVG embutido versus tag de imagem.

Prepare o SVG antes de mexer no tema

Comece com a menor versão útil da marca. Para um ícone, preserve sua silhueta e qualquer abertura intencional no tamanho que os clientes realmente verão. Letras finas ou texturas que ficam boas em uma prancheta podem desaparecer com 20 a 32 pixels. Guarde o arquivo de origem da marca como original; faça uma exportação separada para o ícone.

1. Recupere uma origem limpa. Exporte SVG do design vetorial original, se existir. Se a única origem for um PNG plano, o PerfectVector pode ajudar nessa etapa: crie um candidato SVG com seu fluxo de clipart para SVG e abra o arquivo baixado em um editor vetorial. Compare a silhueta e as formas separadas com o PNG. Uma vetorização por traçado é um ponto de partida, não uma promessa de geometria idêntica.
2. Inspecione a estrutura. Confirme que a marca visível é feita de traçados ou formas vetoriais básicas, não de um único retângulo raster <image> incorporado. Remova caixas de fundo acidentais, fragmentos soltos, contornos duplicados e regiões minúsculas de cor. O guia de preparação de ícones PNG aborda grades consistentes e tamanho óptico em um conjunto.
3. Defina a área de desenho e as cores. Dê à exportação um viewBox com espaçamento adequado. Mantenha as cores fixas da marca se ela precisar continuar em dois tons. Se um ícone de uma cor deve herdar a cor do tema, faça os traçados pretendidos usarem currentColor. O guia de mudança de cor SVG explica por que um preenchimento fixo pode resistir a uma mudança posterior de cor.
4. Revise o arquivo como código. Mantenha apenas elementos e atributos necessários para o ícone. Remova scripts inesperados, referências externas, resíduos do editor e marcação não confiável antes de embuti-lo em um tema. Abra o SVG limpo no tamanho de ícone e em um tamanho maior de inspeção; as duas verificações identificam erros diferentes.

Para uma pequena estrela monocromática, a origem poderia ser simples assim. O traçado abaixo é um exemplo original, não um ícone fornecido pela Shopify nem um resultado de conversão do PerfectVector. Ele tem um sistema de coordenadas explícito e nenhuma imagem incorporada:

<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>

Uma marca de duas cores precisa de traçados ou formas separados com preenchimentos deliberados. Substituir todas as cores por currentColor apagaria essa distinção. Se a marca fizer parte de uma família maior de ícones, aplique as mesmas regras de tamanho e cor a alguns ícones representativos antes de exportar os demais.

Caminho A: exiba um recurso do tema

O filtro asset_url da Shopify retorna a URL CDN de um arquivo no diretório assets do tema. Adicione seu SVG revisado ali e referencie seu nome exato no template, seção ou snippet Liquid adequado. O exemplo simples abaixo presume que brand-mark.svg seja uma marca decorativa de cores fixas ao lado de texto visível:

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

Use texto alt descritivo se a imagem transmitir informações que o texto adjacente não transmite. Para uma imagem puramente decorativa, alt="" é adequado. A orientação de acessibilidade para temas da Shopify pede um atributo alt em toda imagem e um valor vazio em ícones decorativos. A largura e a altura explícitas também reservam espaço enquanto o recurso carrega, como explica a orientação de entrega de recursos da Shopify.

Esse caminho mantém o SVG como uma imagem do ponto de vista da página. Se a cor do tema mudar, atualize os preenchimentos do SVG ou escolha um caminho embutido, em vez de presumir que uma regra CSS do pai recolorirá o arquivo. Não cole a URL de um arquivo de uma loja em outro tema; deixe asset_url resolver o recurso do tema.

Caminho B: renderize um snippet de ícone embutido

Para um ícone repetido de uma cor, coloque a marcação SVG revisada em um snippet como snippets/brand-mark-icon.liquid. A documentação de snippets da Shopify usa {% render %} para inserir marcação reutilizável. Um snippet mínimo pode receber a cor do estilo de texto ao redor:

<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>

Depois renderize-o no arquivo relevante do tema:

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

Aqui, aria-hidden="true" é para um ícone que apenas decora texto visível próximo. Se o ícone sozinho identificar um botão ou link, dê ao controle um nome acessível em vez de depender de um SVG decorativo. Teste-o com teclado e leitor de tela. Mantenha sua cor CSS e dimensões no sistema normal de estilos do tema, em vez de espalhar valores embutidos específicos.

Um snippet é reutilizável, mas ainda é código do tema. A Shopify recomenda duplicar um tema antes de mudanças no código. Faça a mudança na cópia, confira a página ou seção exata e guarde o snippet original para comparar após uma atualização do tema. Bibliotecas de ícones específicas do tema podem ter seus próprios argumentos e estrutura; inspecione esses arquivos antes de substituir qualquer ícone integrado. A discussão atual da Comunidade Shopify sobre uma biblioteca de ícones ilustra por que renderizar uma biblioteca inteira não é necessariamente o mesmo que selecionar um ícone dela.

Confira a entrega no tamanho final

Um arquivo pode ser tecnicamente válido e ainda parecer errado na loja. Revise a página sobre fundos claros e escuros, se o tema os usar. Confira a marca em seu tamanho CSS real, em uma viewport estreita e ao lado dos ícones vizinhos. Confirme que uma abertura permanece aberta, que as cores têm contraste suficiente e que o ícone não está recortado por seu viewBox ou contêiner.

Se o recurso aparecer como um retângulo borrado ao ampliar, inspecione-o em busca de raster incorporado. Se um ícone embutido ignorar a cor do tema, procure preenchimentos fixos, estilos embutidos ou um seletor mais específico. Se nada aparecer, primeiro confira o nome do arquivo de recurso ou do snippet, depois a marcação da própria seção do tema. Não mude várias coisas de uma vez. O guia de ícones com máscara CSS aborda outro caminho quando você precisa recolorir uma silhueta sem embutir seus traçados.

Para seu próprio pictograma plano apenas raster, crie um candidato SVG com o PerfectVector e inspecione seus traçados, aberturas e cores no tamanho pretendido de ícone antes de escolher o caminho do tema. Se você já tem um bom SVG, pule a vetorização por traçado e use esse tempo na prévia da loja.

Perguntas frequentes

Posso enviar um ícone SVG pela tela Customize de qualquer tema Shopify? Não. Alguns temas oferecem um campo de ícone ou SVG personalizado; outros exigem um recurso ou edição de código. Confira as seções e a documentação do tema específico antes de presumir que um campo existe.

Por que meu SVG enviado não acompanha a cor do tema? Um SVG usado por uma tag de imagem é um recurso de imagem, portanto o CSS da página não estiliza seus traçados internos. Edite os preenchimentos do SVG para um recurso de cores fixas ou use marcação embutida revisada com currentColor onde a cor controlada pelo tema for necessária.

Devo converter um ícone de marca PNG em SVG antes de adicioná-lo? Converta um pictograma plano se ele precisar de traçados escaláveis e editáveis. Inspecione a vetorização no tamanho pretendido de ícone e remova formas soltas. Mantenha uma fotografia ou imagem texturizada como raster se a vetorização por traçado puder descartar os detalhes que a definem.

Fontes

1. Shopify Developers — Arquitetura de temas — Recursos do tema, snippets e onde a marcação deve ficar.
2. Shopify Developers — asset_url — Comportamento da URL de recurso do tema usado no exemplo Liquid.
3. Shopify Developers — Snippets — Marcação Liquid reutilizável e a tag render.
4. Central de Ajuda Shopify — Edição do código do tema — Abordagem que começa pelo editor, duplicação de tema e cuidados com mudanças de código.
5. Shopify Developers — Boas práticas de acessibilidade — Texto alternativo e tratamento de ícones decorativos.
6. Shopify Developers — Sirva recursos pela CDN Shopify — Filtros de recursos e dimensões explícitas de imagem.
7. MDN — SVG como imagem — Restrições do contexto de imagem no navegador.
8. MDN — Atributo color do SVG — Como currentColor fornece valores para preenchimentos e contornos SVG.