O que é SVG?
Scalable Vector Graphics (SVG) é uma das ferramentas mais úteis e versáteis à disposição de um desenvolvedor de front-end. Com o SVG, podemos ter imagens dinâmicas que podem ser dimensionadas para qualquer tamanho, geralmente por uma fração da largura de banda dos formatos de imagem raster tradicionais, como JPEG e PNG.
Mas o SVG pode ser mais complicado de usar, especialmente em frameworks JavaScript modernos como Vue.js . Desde a simples questão de como melhor carregar arquivos SVG em seus modelos, até como lidar com animações e acessibilidade, há muitas armadilhas a evitar.
Tenho trabalhado com Vue e SVG nos últimos anos , e desenvolvi (trocadilhos) alguns truques e recomendações que gostaria de compartilhar.
Embora os exemplos nesta postagem sejam todos mostrados com o Vue, a ideia geral deve funcionar com qualquer componente com base em estrutura.
Vamos mergulhar!
Usando SVG com Vue
Embora existam tecnicamente mais de três maneiras de realizar a tarefa (HTML por padrão tem vários, e isso antes mesmo de adicionarmos o Vue à mistura), sempre me pego gravitando em um dos três métodos a seguir para dominar o SVG. A grande maioria dos casos de uso é abordada nas três abordagens abaixo.
1. Carregando um HTML SVG padrão
Existem várias maneiras de carregar um arquivo SVG na página por padrão no navegador, e qualquer uma delas funcionará com o Vue. No final do dia, o Vue usa modelos HTML dinâmicos, o que significa que a maneira mais direta de usar o SVG com o Vue é exatamente como você faria com o HTML padrão:
Colocando o
Cada método tem suas desvantagens, mas são os dois métodos com os quais os usuários estão mais familiarizados, então não vou me alongar muito sobre eles aqui.
Basta dizer que, se funciona em HTML, também funcionará no Vue. Portanto, embora você não receba nada de novo ou chamativo com essa abordagem, ela também é direta.
2. Usando o vue-svg-loader
Vamos entrar em um território um pouco mais emocionante. Existem vários métodos específicos do Vue para trabalhar com arquivos SVG. Meu favorito pessoal é vue-svg-loader .
O único real a desvantagem do vue-svg-loader é que, para usá-lo, você precisa executar uma instalação npm e editar seu webpack config (veja as instruções aqui ). Não é muito trabalho, mas nem todos os projetos estão interessados em adicionar dependências ou configurações adicionais. Dependendo do projeto, você pode nem estar no controle dessas opções.
Se você tiver essa liberdade, entretanto, o vue-svg-loader permite importar arquivos SVG e usá-los como componentes do Vue , que é simples e conveniente. Depois de instalar o vue-svg-loader, podemos fazer isso:
Como mencionado, há algumas instalações e configurações necessárias para seguir este caminho, portanto, certifique-se de verificar o documentação do vue-svg-loader , mas é fácil de usar depois de colocá-lo em execução.
Como bônus, o arquivo SVG é colocado diretamente no DOM onde é usado, para que você possa direcionar partes específicas dele com JavaScript e/ou CSS para animações e estilos.
Também existem algumas outras opções específicas do Vue para obter SVG em seu aplicativo cobertas nesta postagem StackOverflow , mas na minha experiência, vue-svg-loader é o melhor do grupo para a maioria dos casos de uso.
Isso nos leva ao nosso terceira opção.
3. Componentes do SVG Vue
Este é meu método favorito e passaremos a maior parte do restante do artigo abordando-o em detalhes. Essa abordagem permite que você tenha mais flexibilidade com animações, bem como controle direto sobre os elementos SVG. Também permite importações fáceis-tudo sem dependências adicionais ou alterações de configuração!
Introdução aos componentes SVG Vue
Sempre que trabalho com SVG no Vue, minha preferência é quase sempre para criar um novo componente do Vue que é exclusivamente para a marcação e o estilo daquele arquivo SVG específico.
Então, sempre que eu quiser usar ** esse SVG em meu projeto, eu simplesmente o importo e o uso como qualquer outro Vue componente. Aqui está um exemplo básico de componente SVG para fins de demonstração:
Esta abordagem tem vários principais benefícios:
Torna os arquivos SVG fáceis de usar em qualquer lugar. Basta importá-lo e usá-lo como faria com qualquer outro componente do Vue. O arquivo SVG é renderizado na página em linha, de modo que suas partes individuais permaneçam disponíveis para estilização, animações, etc., mas não consome espaço extra em seus arquivos de modelo principais e componentes Este método inclui todas as coisas boas que você obtém usando o Vue, o que significa que você tem acesso a itens como adereços e lógica. Se você tiver versões alternativas de um SVG (por exemplo, um SVG invertido para o modo escuro ou várias versões do mesmo ícone), poderá aproveitar facilmente a magia Vue
O lado negativo? É necessário algum trabalho extra para configurar os componentes do Vue SVG. Você terá que mover manualmente (e possivelmente editar) a marcação real do arquivo SVG. Pode não valer a pena trazer um arquivo SVG para um componente Vue em uma situação onde ele é apenas uma imagem estática que nunca mudará, precisará de lógica ou será reutilizada.
Se você quiser você poderia atualizar a aparência de uma imagem com alguma lógica JavaScript ou torná-la adaptável ao estado atual do aplicativo. Os componentes SVG Vue são perfeitos!
Vejamos um exemplo. Digamos que você tenha um botão de ícone”favorito”no qual o usuário pode clicar. Inicialmente, é apenas um contorno (mostrado à esquerda), mas se o usuário clicar nele, a estrela será preenchida para indicar que o usuário marcou o item como favorito (mostrado à direita):
Em Antigamente, isso significaria que você precisaria de duas imagens diferentes que você trocaria na hora. Mas com SVG e Vue, você pode criar facilmente um único componente que recebe um adereço e renderiza o estado do ícone de acordo.
Vejamos o código:
