HTML - SVG

Introdução ao SVG

SVG (Scalable Vector Graphics) é um formato baseado em XML para criar gráficos vetoriais na web. Diferentemente das imagens rasterizadas (JPEGs ou PNGs) compostas por pixels, os gráficos SVG são definidos usando instruções matemáticas, permitindo que sejam dimensionados para qualquer tamanho sem perder qualidade.

Uma das principais vantagens do uso do SVG é sua capacidade de criar gráficos nítidos que ficam bons em qualquer tamanho de tela. Seja visualizando uma imagem SVG em um dispositivo móvel pequeno ou em um monitor de desktop grande, os gráficos permanecerão nítidos. Isso torna o SVG adequado para criar logotipos, ícones, gráficos e outras imagens que precisam ser redimensionadas com frequência.

Outro benefício do SVG é seu pequeno tamanho de arquivo em comparação com imagens rasterizadas. Como os gráficos SVG são definidos usando código em vez de pixels, eles podem ser comprimidos e otimizados para reduzir seu tamanho de arquivo sem sacrificar a qualidade da imagem. Isso significa tempos de carregamento de página mais rápidos e melhor desempenho, especialmente em dispositivos móveis ou conexões de internet mais lentas.

Ao comparar SVG com imagens rasterizadas, considere o tipo de gráfico que você está criando. Imagens rasterizadas são melhores para fotografias com muitas cores e detalhes. O SVG se destaca na criação de formas geométricas simples, ícones e ilustrações com cores sólidas ou gradientes. Os gráficos SVG também podem ser animados e tornados interativos usando JavaScript, abrindo possibilidades para conteúdo web envolvente.

<p>Este    é   um   parágrafo   com    espaços   extras.</p>

Este é um parágrafo com espaços extras.

<p>Este é um parágrafo.</div>

<p>Este é um parágrafo.</p>

Sintaxe Básica do SVG

Para começar a usar SVG, você precisa entender sua sintaxe básica e estrutura de documento. O código SVG é escrito em formato XML, o que significa que ele segue um conjunto de regras para definir elementos e atributos.

A primeira coisa a incluir em um documento SVG é a declaração XML e o namespace SVG. O namespace informa ao navegador que o código está escrito no formato SVG.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- O conteúdo SVG vai aqui -->
</svg>

O elemento <svg> é o elemento raiz de um documento SVG. Todos os outros elementos SVG são colocados dentro dele. O atributo xmlns especifica o namespace SVG, que é sempre "http://www.w3.org/2000/svg".

Dois atributos do elemento <svg> são width e height. Eles definem o tamanho da viewport SVG, que é a área visível da imagem SVG. Você pode especificar a largura e altura em pixels ou outras unidades:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
  <!-- O conteúdo SVG vai aqui -->
</svg>

Outro atributo importante é o viewBox. Ele define o sistema de coordenadas e a proporção da imagem SVG. O atributo viewBox recebe quatro valores: x, y, width e height. Os valores x e y especificam o canto superior esquerdo do viewBox, enquanto width e height definem seu tamanho:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- O conteúdo SVG vai aqui -->
</svg>

O viewBox começa nas coordenadas (0, 0) e tem uma largura e altura de 100 unidades cada. A imagem SVG será dimensionada para caber dentro da viewport mantendo sua proporção.

O SVG usa um sistema de coordenadas onde o canto superior esquerdo é (0, 0), e os valores aumentam para a direita e para baixo. Você pode especificar coordenadas e comprimentos em várias unidades, como pixels (px), em, rem ou porcentagens. No entanto, as unidades mais comuns em SVG são as unidades de usuário, definidas pelo atributo viewBox.

Desenhando Formas Básicas

O SVG oferece várias formas básicas que você pode usar para criar gráficos. Essas formas incluem retângulos, círculos, elipses, linhas, polígonos, polilinhas e caminhos.

Para desenhar um retângulo, use o elemento <rect>. Você pode especificar a posição e o tamanho do retângulo usando os atributos x, y, width e height. Os atributos x e y definem as coordenadas do canto superior esquerdo, enquanto width e height determinam as dimensões do retângulo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" />
</svg>

Para criar um círculo, use o elemento <circle>. Especifique a posição do centro usando os atributos cx e cy, e defina o raio com o atributo r:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="25" />
</svg>

Para uma elipse, use o elemento <ellipse>. Semelhante a um círculo, defina a posição do centro com cx e cy, mas em vez de um único raio, use os atributos rx e ry para definir os raios horizontal e vertical:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <ellipse cx="50" cy="50" rx="30" ry="20" />
</svg>

Para desenhar uma linha, use o elemento <line>. Especifique o ponto inicial com os atributos x1 e y1 e o ponto final com x2 e y2:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <line x1="10" y1="10" x2="90" y2="90" />
</svg>

Para criar formas complexas com linhas retas, use os elementos <polygon> ou <polyline>. Ambos usam um atributo points que define os vértices da forma. A diferença é que um polígono fecha automaticamente a forma, enquanto uma polilinha a deixa aberta:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <polygon points="50,10 90,90 10,90" />
  <polyline points="10,50 50,10 90,50" />
</svg>

Quando você precisa criar curvas e formas complexas, use o elemento <path>. Ele usa um atributo d que define o caminho usando uma série de comandos e coordenadas. Alguns comandos comuns incluem M (mover para), L (linha para), H (linha horizontal), V (linha vertical), C (curva de Bézier cúbica) e Z (fechar caminho):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M10,50 C10,10 90,10 90,50 C90,90 10,90 10,50 Z" />
</svg>

Essas formas básicas fornecem os blocos de construção para criar uma variedade de gráficos com SVG. Você pode combiná-las, estilizá-las e transformá-las para obter o visual desejado para seus projetos.

Estilizando Elementos SVG

O SVG oferece maneiras de estilizar e mudar a aparência dos elementos. Você pode usar atributos como fill e stroke para definir cores, opacidade para transparência, gradientes e padrões para textura, e até mesmo CSS para estilização mais avançada.

Para definir a cor de preenchimento de um elemento SVG, use o atributo fill. Este atributo aceita palavras-chave de cores, valores hexadecimais, RGB ou HSL:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" fill="blue" />
  <circle cx="50" cy="50" r="25" fill="#ff0000" />
</svg>

O contorno é a borda de uma forma SVG. Defina a cor do contorno usando o atributo stroke e controle sua largura com stroke-width:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" fill="none" stroke="blue" stroke-width="2" />
  <circle cx="50" cy="50" r="25" fill="none" stroke="#ff0000" stroke-width="4" />
</svg>

Para tornar um elemento transparente, use o atributo opacity. Ele aceita valores entre 0 (totalmente transparente) e 1 (totalmente opaco):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" fill="blue" opacity="0.5" />
  <circle cx="50" cy="50" r="25" fill="#ff0000" opacity="0.7" />
</svg>

Você também pode definir a opacidade do preenchimento ou do contorno separadamente usando fill-opacity e stroke-opacity.

O SVG suporta gradientes lineares e radiais para criar transições suaves de cores. Defina o gradiente usando o elemento <linearGradient> ou <radialGradient> e faça referência a ele no atributo fill ou stroke usando uma URL:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="50" height="30" fill="url(#myGradient)" />
</svg>

Os padrões permitem que você preencha formas com imagens repetitivas ou outros elementos SVG. Defina o padrão usando o elemento <pattern> e faça referência a ele no atributo fill ou stroke:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="blue" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="50" height="30" fill="url(#myPattern)" />
</svg>

Além dos atributos, você pode estilizar elementos SVG usando CSS. Aplique regras CSS a elementos SVG usando estilos inline, folhas de estilo internas ou folhas de estilo externas:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .myStyle {
      fill: blue;
      stroke: red;
      stroke-width: 2;
    }
  </style>
  <rect x="10" y="10" width="50" height="30" class="myStyle" />
</svg>

O uso de CSS permite uma estilização mais flexível e reutilizável, pois você pode direcionar elementos com base em seus nomes de tag, classes ou IDs.

Ao combinar essas técnicas de estilização, você pode criar gráficos SVG visualmente atraentes e personalizados que se adequam ao design e aos requisitos do seu projeto.

Texto em SVG

Adicionar texto aos seus gráficos SVG é fácil usando o elemento <text>. Você pode posicionar o texto usando os atributos x e y, que especificam as coordenadas do ponto de ancoragem do texto. Por padrão, o ponto de ancoragem é a borda esquerda da linha de base do texto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <text x="20" y="35">Olá, SVG!</text>
</svg>

Para formatar e estilizar o texto, você pode usar vários atributos ou propriedades CSS. Por exemplo, você pode alterar a família da fonte, tamanho, peso e estilo usando os atributos font-family, font-size, font-weight e font-style:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <text x="20" y="35" font-family="Arial" font-size="24" font-weight="bold" font-style="italic">
    Olá, SVG!
  </text>
</svg>

Você também pode aplicar cores de preenchimento e contorno ao texto, ajustar o ponto de ancoragem do texto usando o atributo text-anchor (com valores como start, middle ou end), e controlar o espaçamento entre caracteres ou palavras usando os atributos letter-spacing e word-spacing.

Se você precisar quebrar o texto ou criar texto em várias linhas, pode usar o elemento <tspan> dentro do elemento <text>. Cada <tspan> representa uma linha separada de texto e pode ter seu próprio posicionamento e estilo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <text x="20" y="35">
    <tspan>Olá,</tspan>
    <tspan x="20" y="60">SVG!</tspan>
  </text>
</svg>

Outra característica interessante do texto em SVG é a capacidade de colocá-lo ao longo de um caminho. Para fazer isso, primeiro defina um caminho usando o elemento <path>. Em seguida, use o elemento <textPath> dentro do elemento <text> e faça referência ao caminho usando o atributo href:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <path id="meuCaminho" d="M20,20 C20,50 180,50 180,20" fill="none" stroke="black" />
  <text>
    <textPath href="#meuCaminho">Texto ao longo de um caminho</textPath>
  </text>
</svg>

O texto seguirá a forma do caminho, criando efeitos visuais interessantes. Você pode controlar a posição do texto ao longo do caminho usando o atributo startOffset, que aceita um valor de comprimento ou porcentagem.

Adicionar texto aos seus gráficos SVG abre muitas possibilidades para criar visualizações, gráficos ou diagramas informativos e atraentes. Com as várias opções de formatação e estilo disponíveis, você pode personalizar o texto para atender às suas necessidades de design.

Transformando e Animando SVG

O SVG permite transformar e animar elementos para criar gráficos envolventes e interativos. Você pode aplicar transformações como translação, rotação e escala aos elementos, animá-los usando SMIL (Synchronized Multimedia Integration Language) ou torná-los interativos com JavaScript.

Para transformar um elemento SVG, use o atributo transform. O atributo aceita várias funções de transformação:

Você pode combinar várias transformações listando-as separadas por espaço dentro do atributo transform:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="blue" transform="translate(25, 25) rotate(45) scale(0.5)" />
</svg>

O SVG também suporta a animação de elementos usando SMIL. Para criar uma animação, use o elemento <animate> dentro do elemento que você deseja animar. Especifique o atributo a ser animado usando o atributo attributeName, e defina os valores inicial e final com os atributos from e to. Você pode controlar a duração e o tempo da animação com os atributos dur e begin:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="blue">
    <animate attributeName="width" from="100" to="150" dur="2s" begin="0s" repeatCount="indefinite" />
  </rect>
</svg>

Este exemplo anima a largura do retângulo de 100 para 150 ao longo de uma duração de 2 segundos, repetindo indefinidamente.

Você pode animar vários atributos como x, y, width, height, fill, opacity, e mais. O SMIL também fornece outros elementos de animação como <animateTransform> para animar transformações e <animateMotion> para animar um elemento ao longo de um caminho.

Para tornar os elementos SVG interativos, você pode usar JavaScript para ouvir eventos e manipular os elementos. Os elementos SVG suportam eventos comuns como click, mouseover, mouseout, e mais. Você pode anexar ouvintes de eventos aos elementos usando JavaScript e modificar seus atributos ou estilos com base nas interações do usuário:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect id="myRect" x="50" y="50" width="100" height="100" fill="blue" />
  <script>
    const rect = document.getElementById('myRect');
    rect.addEventListener('click', function() {
      this.setAttribute('fill', 'red');
    });
  </script>
</svg>

Você também pode usar bibliotecas JavaScript como D3.js ou Snap.svg para simplificar o trabalho com SVG e criar animações e interações complexas.

Ao usar transformações, animações e interatividade, você pode dar vida aos seus gráficos SVG e criar experiências de usuário envolventes. Experimente essas técnicas para adicionar movimento, responsividade e interesse visual aos seus projetos baseados em SVG.

Filtros e Efeitos SVG

O SVG oferece um conjunto de filtros e efeitos que permitem adicionar mudanças visuais aos seus gráficos. Com filtros, você pode criar efeitos de desfoque, sombra projetada e iluminação, enquanto mascaramento e recorte ajudam a controlar a visibilidade dos elementos. O SVG também suporta modos de mesclagem para criar combinações visuais.

Um efeito de filtro é o desfoque gaussiano, que suaviza as bordas de um elemento. Para aplicar um efeito de desfoque, use o elemento <filter> com uma primitiva <feGaussianBlur>. Defina o atributo stdDeviation para controlar a quantidade de desfoque:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <filter id="blurFilter">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurFilter)" />
</svg>

Outro efeito é a sombra projetada, que adiciona uma sombra atrás de um elemento. Use a primitiva de filtro <feDropShadow> para criar uma sombra projetada. Especifique os atributos dx e dy para o deslocamento da sombra, stdDeviation para a quantidade de desfoque e flood-color para a cor da sombra:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <filter id="dropShadowFilter">
      <feDropShadow dx="4" dy="4" stdDeviation="4" flood-color="black" />
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#dropShadowFilter)" />
</svg>

O SVG também suporta efeitos de iluminação, que podem adicionar profundidade e realismo aos seus gráficos. Use as primitivas de filtro <feDiffuseLighting> ou <feSpecularLighting> para criar efeitos de iluminação. Essas primitivas requerem uma fonte de luz, como <fePointLight> ou <feDistantLight>, e um atributo lighting-color para especificar a cor da luz:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <filter id="lightingFilter">
      <feDiffuseLighting in="SourceGraphic" lighting-color="white">
        <fePointLight x="100" y="100" z="50" />
      </feDiffuseLighting>
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#lightingFilter)" />
</svg>

Mascaramento e recorte são técnicas para controlar a visibilidade dos elementos. Uma máscara é um canal alfa que determina a opacidade de um elemento, enquanto um caminho de recorte define uma região fora da qual os elementos são cortados. Para criar uma máscara, use o elemento <mask> e defina o conteúdo da máscara usando outros elementos SVG. Faça referência à máscara usando o atributo mask:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <mask id="myMask">
      <rect x="0" y="0" width="200" height="200" fill="white" />
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" mask="url(#myMask)" />
</svg>

Para recorte, use o elemento <clipPath> para definir a região de recorte e faça referência a ele usando o atributo clip-path:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" clip-path="url(#myClip)" />
</svg>

O SVG suporta modos de mesclagem, que determinam como as cores dos elementos sobrepostos se combinam. Use o atributo mix-blend-mode para definir o modo de mesclagem de um elemento. Alguns modos de mesclagem comuns incluem multiply, screen, overlay e darken:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="blue" />
  <circle cx="100" cy="100" r="50" fill="red" mix-blend-mode="multiply" />
</svg>

Usando filtros, efeitos, mascaramento, recorte e modos de mesclagem, você pode adicionar riqueza visual e profundidade aos seus gráficos SVG. Experimente essas técnicas para criar designs que capturem a atenção do seu público.

Incorporando SVG em HTML

Você pode incorporar gráficos SVG em seus documentos HTML de várias maneiras, cada uma com suas próprias vantagens e casos de uso. Os três métodos principais são o uso da tag <img>, SVG inline e SVG como imagem de fundo.

Uma das maneiras mais simples de incorporar uma imagem SVG é usando a tag <img>. Você pode referenciar um arquivo SVG externo no atributo src, assim como faria com outros formatos de imagem como JPEG ou PNG:

<img src="image.svg" alt="Imagem SVG" width="200" height="200">

Usar a tag <img> é bom quando você quer manter seu código SVG separado do seu HTML e tratar o SVG como um arquivo de imagem normal. No entanto, este método não permite estilizar ou aplicar scripts ao SVG a partir do seu HTML.

Se você deseja mais controle sobre seu SVG e a capacidade de estilizá-lo e aplicar scripts, você pode usar SVG inline. Isso significa colocar o código SVG diretamente no seu documento HTML:

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <rect x="50" y="50" width="100" height="100" fill="blue" />
    <circle cx="100" cy="100" r="50" fill="red" />
  </svg>
</body>

SVG inline permite que você use CSS para estilizar os elementos SVG e JavaScript para interagir com eles, assim como faria com outros elementos HTML. Este método é bom quando você quer criar gráficos SVG dinâmicos e interativos que são integrados à sua página web.

Você também pode usar SVG como uma imagem de fundo em CSS. Referencie o arquivo SVG na propriedade background-image ou na propriedade abreviada background:

<div class="background"></div>

<style>
.background {
  width: 200px;
  height: 200px;
  background-image: url('image.svg');
  background-size: cover;
}
</style>

Usar SVG como imagem de fundo é útil quando você quer adicionar gráficos decorativos à sua página web sem adicioná-los à sua marcação HTML. Você pode aplicar propriedades CSS como background-size, background-position e background-repeat para controlar como o fundo SVG é exibido.

Ao decidir qual método usar, pense em suas necessidades específicas:

Acessibilidade em SVG

Ao criar gráficos SVG, é importante considerar a acessibilidade para garantir que seu conteúdo possa ser entendido e navegado por todos os usuários, incluindo aqueles com deficiências. O SVG oferece vários recursos que podem ajudar a melhorar a acessibilidade, como os elementos <title> e <desc>, funções e atributos ARIA, e outras boas práticas.

O elemento <title> permite fornecer um título breve e descritivo para um elemento SVG. Este título não é exibido visualmente, mas pode ser lido por leitores de tela para ajudar os usuários a entender o propósito do elemento. Coloque o elemento <title> como o primeiro filho do elemento que ele descreve:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40">
    <title>Círculo</title>
  </circle>
</svg>

O elemento <desc> permite fornecer uma descrição mais detalhada de um elemento SVG. Assim como o <title>, a descrição não é renderizada visualmente, mas pode ser acessada por leitores de tela e outras tecnologias assistivas. Coloque o elemento <desc> após o elemento <title>:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40">
    <title>Círculo</title>
    <desc>Um círculo azul com raio de 40 unidades, centralizado em (50, 50)</desc>
  </circle>
</svg>

Funções e atributos ARIA (Aplicações de Internet Ricas Acessíveis) também podem ser usados para melhorar a acessibilidade dos elementos SVG. As funções ARIA definem o propósito ou tipo de um elemento, enquanto os atributos ARIA fornecem informações adicionais sobre o estado ou propriedades do elemento.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" role="button" tabindex="0">
    <title>Clique em mim</title>
  </circle>
</svg>

Outras boas práticas de acessibilidade para SVG incluem:

Otimização e Desempenho de SVG

Ao usar gráficos SVG em seu site, é importante otimizá-los para garantir que suas páginas carreguem rapidamente. Algumas formas de melhorar o desempenho do SVG são minimizar o tamanho do arquivo, usar sprites SVG e seguir outras considerações de desempenho.

Uma maneira fundamental de otimizar o SVG é reduzir o tamanho do arquivo. Arquivos SVG podem conter muitos dados desnecessários, como metadados, comentários e espaços em branco extras, que podem aumentar o tamanho do arquivo. Para minimizar o tamanho do arquivo, você pode:

Existem também ferramentas como o SVGO (SVG Optimizer) que podem automatizar o processo de otimização de arquivos SVG.

Outra técnica para melhorar o desempenho do SVG é usar sprites SVG. Um sprite é um único arquivo que contém vários elementos SVG, cada um identificado por um ID único. Em vez de carregar muitos arquivos SVG individuais, você pode carregar o sprite uma vez e exibir diferentes partes dele conforme necessário, o que reduz o número de solicitações HTTP e acelera o carregamento da página.

Para criar um sprite SVG, combine seus arquivos SVG individuais em um único arquivo e dê a cada elemento SVG um ID único. Em seguida, faça referência ao sprite em seu HTML usando o elemento <use> e o ID do SVG que você deseja exibir:

<svg>
  <use xlink:href="sprite.svg#icon-1"></use>
</svg>

Existem também algumas considerações gerais de desempenho a serem lembradas ao usar SVG:

• Use SVG apenas para gráficos que precisam ser escaláveis ou interativos. Para imagens simples, formatos raster como JPEG ou PNG podem ser mais adequados.
• Esteja atento ao número e complexidade dos elementos SVG em uma página. Gráficos muito complexos com muitos elementos podem tornar a renderização mais lenta.
• Evite usar filtros e efeitos SVG excessivamente, pois eles podem consumir muito desempenho, especialmente em dispositivos móveis.
• Armazene arquivos SVG em cache para reduzir os tempos de carregamento para visitantes recorrentes.
• Sirva arquivos SVG com compressão gzip para reduzir seu tamanho de transferência.