Extraia um ícone de um sprite SVG

Uma folha de sprites empilha dezenas de ícones num arquivo só e pinta cada um com <use href="#id">. Salve do jeito óbvio e você recebe a folha inteira — ou nada. O SVG Downloader resolve a referência e entrega aquele único glifo.

Instalar a extensão Ler o passo a passo →

O problema

Por que um sprite entrega a folha inteira ou nada

Sprites SVG são o jeito de conjuntos grandes de ícones continuarem rápidos. Cada ícone é definido uma vez — normalmente como um <symbol> com um id, guardado dentro de um único <svg> escondido — e cada lugar que mostra um ícone escreve só <use href="#chevron">. O navegador carimba uma cópia daquele símbolo onde a referência está. Rápido de carregar, e uma armadilha para extrair.

A armadilha é que um elemento <use> não guarda desenho nenhum. Ele é um ponteiro. Tente salvar o ícone que você vê e estará salvando uma referência vazia — um arquivo que não desenha nada sozinho porque o símbolo apontado não está nele. Vá pelo outro caminho e salve a origem do sprite, e você recebe os quarenta ícones soldados num arquivo só, a maioria definida em coordenadas bem fora de qualquer viewBox. Nenhum dos dois é o ícone que você queria.

O que o SVG Downloader faz no lugar

Abra o popup e ele segue os ponteiros. Para cada <use> que aponta para algum lugar do mesmo documento — o clássico <use href="#chevron"> para um sprite inline escondido — ele busca o <symbol> ou <g> referenciado e reconstrói um SVG completo e independente para aquele único glifo. Cada um ganha sua prévia isolada, então uma folha de quarenta ícones vira quarenta prévias que você percorre e salva uma a uma.

A referência resolvida. O href (ou o antigo xlink:href) é seguido até seu símbolo, e esse símbolo é clonado num <defs> novo no topo do arquivo salvo. O <use> fica onde estava e agora resolve contra markup que o próprio arquivo carrega — então ele renderiza certo em qualquer lugar, sem sprite ao lado.
Um glifo, não a folha. Você salva o chevron, não o chevron mais trinta e nove vizinhos. Cada referência é extraída em separado, e você pode digitar o nome que quiser antes de salvar — ou levar tudo como um conjunto numerado com Baixar tudo em ZIP.
Ou leve todos. Quando você quer o conjunto completo, Baixar tudo em ZIP extrai todo símbolo referenciado de uma vez, sem duplicatas, num arquivo só.

O que você recebe de volta

Formato: Um .svg limpo e dentro do padrão por glifo — o símbolo embutido num arquivo autossuficiente, com namespace consertado.
Referências lidas: <use> apontando dentro do mesmo documento, via href e o antigo xlink:href. Arquivos de sprite externos não são resolvidos.
Onde ele roda: Inteiramente no seu navegador. As referências são resolvidas localmente — sem upload, sem servidor, sem conta.
Também dá conta de: SVG inline, fundos CSS e ZIP da página inteira.

Vale saber

Perguntas sobre sprites SVG

O que é um sprite SVG, exatamente?

Um arquivo SVG que define muitos ícones como elementos <symbol> separados, cada um com seu id. As páginas referenciam um ícone com <use href="#id"> em vez de repetir o markup. É o equivalente, para conjuntos de ícones, de uma folha de sprites CSS — um download, muitos glifos.

Por que salvar o ícone me dá um arquivo vazio?

Porque um elemento <use> não contém desenho — ele aponta para um símbolo definido em outro lugar. Copiada sozinha, aquela referência não tem o que renderizar. O SVG Downloader resolve o ponteiro até o símbolo de verdade primeiro, então o arquivo que você salva desenha o ícone.

Funciona com um arquivo de sprite externo, não só com um inline?

Não — sprites externos não são suportados. Se a referência aponta para fora do documento atual, como em <use href="/sprite.svg#cart">, aquele <svg> é ignorado e contado como ignorado, em vez de ser entregue quebrado. Só referências do mesmo documento — <use href="#cart"> para um sprite inline escondido, que é como a maioria dos sites publica — são resolvidas. Se um site usa um sprite externo, abrir sprite.svg direto entrega a folha de origem.

E um símbolo que referencia outro símbolo?

A resolução vai um nível de profundidade. Um <symbol> cujo conteúdo inclui outro <use> apontando para um segundo símbolo fica sem resolver, então essa peça aninhada não desenha no arquivo salvo. É incomum — a maioria dos sprites define cada glifo de forma plana — mas vale conferir a prévia se um ícone parecer meio vazio.

Tire um ícone limpo da folha

Grátis, privado, e segue a referência que o navegador esconde.

Instalar a extensão Todos os recursos →