Como um arquivo SVG funciona
O SVG é um arquivo de texto em XML. Abra um no Bloco de Notas e você verá algo assim:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#1d6bff"/>
<path d="M30 50 L45 65 L72 36" stroke="#fff" fill="none"/>
</svg>Esse arquivo minúsculo desenha um círculo azul com um "check" branco, perfeito em 16 px ou em 16 metros. Um PNG do mesmo desenho guardaria cada pixel e borraria ao ampliar. A documentação de SVG da MDN é uma ótima referência em português.
Para que serve o SVG
- Logos e identidade visual: um arquivo mestre para gráfica, fachada, brindes e site.
- Plotter de recorte: Silhouette, Cricut e plotters profissionais seguem os caminhos do SVG. Veja SVG para Cricut.
- Corte e gravação a laser: LightBurn e RDWorks importam SVG. Veja arquivo para corte a laser.
- Sites e aplicativos: ícones nítidos em telas retina, estilizáveis com CSS.
- Gráfica, silk e bordado: convertido em PDF, EPS ou CDR para produção.
SVG ou PNG/JPG: vantagens e desvantagens
| SVG | PNG / JPG | |
|---|---|---|
| Ampliação | Infinita, sempre nítido | Borra ao ampliar |
| Edição | Formas e cores | Só pixels |
| Tamanho (logos) | Geralmente pequeno | Cresce com a resolução |
| Fotos | Não serve | Ideal |
| Plotter e laser | Sim | Precisa vetorizar |
Resumo: SVG para tudo que é desenhado; PNG ou JPG para fotos. A versão completa está em diferença entre vetor e bitmap.
Como abrir e editar um arquivo SVG
- Visualizar: arraste para o Chrome, Edge, Firefox ou Safari.
- Editar grátis: Inkscape, Figma ou Canva.
- Editar profissionalmente: CorelDRAW, Illustrator, Affinity Designer.
- Cortar: Silhouette Studio (Designer), Cricut Design Space, LightBurn.
- Converter: exporte PDF, EPS, AI, CDR, DXF ou PNG em qualquer um desses programas.
Como transformar PNG ou JPG em SVG
Renomear .png para .svg não adianta, e muitos "conversores" só embutem o PNG dentro do SVG, que continua sendo pixel. Para ter um SVG de verdade é preciso vetorizar: detectar cores e formas e redesenhar em curvas. O vetorizador do topo faz isso com IA em segundos; a prévia com zoom é grátis e o download custa R$ 9,89. Detalhes em PNG para SVG e como vetorizar uma imagem.
Uma breve história do formato SVG
O SVG foi desenvolvido pelo W3C no fim dos anos 1990, quando várias empresas propunham formatos vetoriais concorrentes para a web. O SVG 1.0 virou recomendação do W3C em 2001, seguido do SVG 1.1, a versão que a maioria dos programas usa. O SVG 2 refina o formato e o aproxima do CSS e do HTML modernos.
Por anos o suporte nos navegadores foi irregular, e os designers usavam ícones em PNG e fontes de ícones. Hoje todos os navegadores desenham SVG nativamente, e o formato virou padrão para logos e ícones na web e entrada padrão de plotters e lasers. A visão oficial está na página do SVG no W3C.
O que é SVG por dentro: caminhos, grupos e viewBox
- <path>: o principal. Descreve uma forma com comandos de mover, linha e curva. Logos são quase só paths.
- Formas básicas:
<rect>,<circle>,<ellipse>,<polygon>. - <g>: grupos. Nos arquivos do Vecfy, um grupo por cor.
- fill e stroke: preenchimento e contorno. Plotters seguem as bordas das formas preenchidas.
- viewBox: o sistema de coordenadas interno que faz o desenho escalar para qualquer largura e altura.
- <image>: bitmap embutido. Se aparecer, parte do arquivo não é vetor, sinal de alerta para gráfica e corte.
Ninguém precisa escrever SVG à mão, mas conhecer essas peças ajuda a identificar um vetor falso ou consertar um arquivo que a gráfica ou a plotter recusou.