QR code em SVG e arquivos vetoriais: baixe um exemplo, veja o que há dentro, use em qualquer lugar

Baixe um QR code SVG de exemplo

Comece pelo arquivo em si: baixe o QR code SVG de exemplo. Ele tem 6.355 bytes, é um símbolo de versão 6 com 41 x 41 módulos no nível de correção de erros H, e codifica o endereço desta página. Foi gerado com o mesmo codificador que o KoloQR usa no navegador e conferido com o decodificador jsQR antes de ser publicado, em 22 de setembro de 2026, então ele é lido. Para saber qual formato baixar para cada trabalho - SVG, PNG, PDF ou EPS - veja SVG vs PNG vs PDF vs EPS para QR codes; esta página é sobre obter, ler e usar o SVG em si.

O exemplo é de propósito o SVG mais simples que um QR code pode ser. Módulos quadrados pretos sobre um fundo branco, uma zona de silêncio de quatro módulos, sem logotipo, sem moldura, sem cantos arredondados e sem atributos width ou height, então uma ferramenta de design o abre no tamanho padrão que ela usa e o arquivo escala limpo a partir daí. Um código estilizado do gerador é um arquivo mais longo com mais partes; o exemplo é o arquivo para abrir em um editor de texto quando a pergunta é o que um QR code em SVG realmente é.

A única regra do exemplo é o que ele codifica. Lê-lo abre este guia, e nada no Illustrator, no Figma ou em qualquer outra ferramenta consegue fazê-lo abrir outra coisa, porque o padrão de módulos é o endereço. Use como substituto em uma maquete, um template ou um layout de impressão enquanto o código real ainda está sendo decidido, depois substitua por um código gerado a partir do destino real antes de qualquer coisa ser impressa.

O que há dentro do arquivo SVG de exemplo, elemento por elemento

O SVG de exemplo contém seis linhas: uma declaração XML, um comentário, um elemento svg de abertura com uma viewBox, um retângulo de fundo branco, um traçado preto contendo todos os módulos escuros e a tag de fechamento. Esse é o arquivo inteiro, e cada parte tem uma função da qual um leitor ou uma ferramenta de design depende.

Os dados do traçado se leem em unidades de módulo. M4 4h7v1H4z significa: ir para a coluna 4, linha 4, desenhar 7 unidades para a direita, 1 unidade para baixo, voltar para a coluna 4 e fechar - que é a borda superior do padrão de localização do canto superior esquerdo, logo dentro da zona de silêncio de quatro módulos. Cada subtraçado é essa forma com números diferentes. Módulos escuros adjacentes em uma linha são mesclados em uma única sequência em vez de desenhados como um quadrado cada, o que deixa o arquivo um pouco menor e não muda nada na geometria que um leitor vê.

Um QR code em SVG de outro gerador vai diferir nos detalhes - um retângulo por módulo, um grupo por linha, uma transformação em vez de um deslocamento da viewBox - e nenhuma dessas diferenças importa para um leitor. O que importa está na tabela: uma viewBox, um fundo claro sob a zona de silêncio e módulos escuros como formas preenchidas sem traço.

O que é um QR code vetorial, e por que o padrão é o dado

Um arquivo vetorial é uma imagem guardada como formas e coordenadas em vez de pixels, então pode ser redesenhada em qualquer tamanho sem perder nitidez de borda. Um QR code vetorial é, portanto, um conjunto de formas preenchidas sobre uma grade, e a grade é a mensagem: um leitor lê quais células são escuras e quais são claras e transforma esse arranjo de volta no endereço.

Um módulo é um dos pequenos quadrados claros e escuros que carregam os dados de um QR code, e a menor unidade que um leitor precisa resolver. No exemplo há 1.681 posições de módulo e 823 delas são escuras. Quais 823 é o codificador que decide a partir do texto, do nível de correção de erros e de um padrão de máscara, e é por isso que nenhuma ferramenta de design tem um campo onde o endereço possa ser digitado - o endereço não está guardado ao lado da imagem, o endereço é a imagem.

A zona de silêncio é a margem vazia ao redor de um QR code que permite ao leitor detectar onde o símbolo começa e termina, e a norma especifica quatro módulos em cada lado. Em um arquivo vetorial a zona de silêncio se perde com facilidade, porque uma ferramenta que corta rente à arte visível corta rente aos módulos escuros e joga a margem fora. Por isso o exemplo mantém a margem dentro da viewBox e a pinta de branco. A zona de silêncio cobre o que acontece quando ela some.

O que uma exportação SVG do KoloQR contém

Um download SVG do KoloQR é um único arquivo chamado qr-by-koloqr-com.svg que contém o código como partes vetoriais nomeadas separadamente: um fundo, os módulos, os três olhos de localização, uma moldura se uma foi escolhida, um logotipo se um foi adicionado e qualquer texto de rótulo já transformado em contornos. O KoloQR, um gerador de QR code grátis com QR codes circulares e de formatos personalizados, escreve esse arquivo no navegador e não acrescenta nada a ele - nem marca d'água, nem elemento de rastreamento, nem conta.

O que o código de exportação faz no momento do download, na ordem em que faz:

• Contorna os rótulos. Se uma moldura de QR code carrega um texto como SCAN ME, a exportação espera a fonte do rótulo carregar e redesenha cada rótulo como traçado antes de serializar, então o arquivo nunca contém um elemento de texto que precise de uma fonte instalada mais adiante.
• Serializa a arte. O elemento svg que estava na tela é escrito com sua viewBox, e o arquivo recebe uma declaração XML se ainda não tinha uma.
• Acrescenta width e height explícitos. Os dois atributos são copiados da viewBox para que uma ferramenta de design que os leia, o Figma em particular, insira o código no tamanho real em vez de em uma caixa padrão.
• Torna únicos os ids referenciados. Qualquer id para o qual algo no arquivo aponte - uma máscara de recorte, o arco invisível que um rótulo curvo segue - recebe um prefixo único daquela exportação, então dois códigos soltos em um mesmo documento não conseguem recortar um ao outro. Ids que só nomeiam camadas, como Background e Logo, ficam legíveis.

As partes que uma ferramenta de design mostra no painel de camadas vêm do próprio arquivo. O elemento raiz se chama by KoloQR.com; o fundo é um retângulo chamado Background, omitido quando o fundo está definido como transparente; os módulos de dados ficam em um grupo preenchido com a cor de primeiro plano, cada módulo como sua própria forma - um quadrado, um círculo ou uma cápsula quando um padrão de pílula mescla uma sequência; cada olho de localização é um traçado com o furo cortado por um preenchimento par-ímpar, então recolore com um clique; uma moldura desenhada é um traçado com um furo de verdade; um logotipo mora em um grupo chamado Logo. A escala é fixa em dez unidades por módulo, que o guia de formatos já usa para derivar os números de PNG e PDF, então não se repete aqui.

A mesma marcação é o que Copy to Figma coloca na área de transferência. Nada difere entre o texto copiado e o arquivo baixado além de onde ele cai, e é por isso que copiar um QR code para o Figma descreve as camadas que uma colagem produz exatamente nos termos acima.

Como obter um QR code como SVG com o KoloQR

Obter um SVG leva uma visita ao gerador e um download: digite o conteúdo, estilize o código se o design pedir, escolha SVG no menu de download, abra o arquivo na ferramenta de design e leia a prova. Não há conta, nem etapa de e-mail, nem limite de tamanho do arquivo.

1. Abra o gerador e digite o conteúdo. Abra o gerador e digite a URL, os dados do Wi-Fi, o texto ou outro conteúdo. Os botões de download ficam inativos até o campo de conteúdo ter algo, então o exemplo estilizado mostrado antes de digitar não pode ser exportado por engano.
2. Estilize o código antes de exportar. Defina a forma, o padrão dos módulos, o estilo dos olhos, as cores, a moldura e o logotipo aqui e não na ferramenta de design. O SVG é uma foto da prévia, e o indicador de contraste do gerador confere o par de cores antes de ele ser gravado em um arquivo.
3. Escolha SVG no menu de download. Clique na seta ao lado de Download e escolha SVG. O arquivo qr-by-koloqr-com.svg cai na pasta de downloads; Copy to Figma fica no mesmo menu e, em vez disso, coloca a marcação idêntica na área de transferência.
4. Abra ou insira o arquivo na ferramenta de design. Insira o SVG no Illustrator, no InDesign ou no Affinity, arraste para a tela do Figma ou do Inkscape, ou envie para o Canva. Redimensione com as proporções travadas e deixe a zona de silêncio dentro da arte.
5. Leia a prova. Leia o código inserido a partir da tela em 100% e, para impressão, a partir de uma prova impressa no tamanho final, com um iPhone e um celular Android. Confirme que o endereço que abre é o que foi digitado no passo 1.

Como usar um QR code SVG no Illustrator, Figma, Inkscape e Affinity

Os quatro editores vetoriais abrem um QR code SVG como formas editáveis, e o método de trabalho é o mesmo em todos: traga o arquivo, deixe a geometria dos módulos em paz, mude a cor pelo preenchimento e redimensione com a trava de proporção ligada. Os nomes de menu abaixo são os habituais; eles mudam entre versões, então trate-os como o que procurar.

• Adobe Illustrator. Use Arquivo, depois Inserir, ou abra o SVG diretamente. Um SVG inserido costuma chegar como um grupo vinculado ou incorporado; desagrupe uma vez se o preenchimento precisar mudar por parte, depois selecione as formas dos módulos e defina o preenchimento. Nenhuma etapa de Expandir é necessária - os módulos já são traçados, não efeitos dinâmicos. Escale com Shift pressionado, ou pelo painel Transformar com a trava de proporção ligada.
• Figma. Arraste o arquivo .svg para a tela, ou cole a marcação SVG bruta da área de transferência. A central de ajuda do Figma diz que, quando um arquivo SVG é importado, ele deixa de ser tratado como imagem e é convertido em uma camada vetorial editável. O caminho completo, os nomes de camada que chegam e as edições seguras estão em como copiar um QR code para o Figma.
• Inkscape. Arquivo, depois Abrir, abre o SVG como documento; Arquivo, depois Importar, costuma perguntar se o SVG deve entrar como objetos editáveis ou como imagem vinculada - escolha editáveis. O SVG próprio do Inkscape é um superconjunto do arquivo, então salvar depois como SVG simples o mantém portátil.
• Affinity Designer. Arquivo, depois Inserir, ou Arquivo, depois Abrir. Um SVG inserido costuma chegar como documento incorporado que pode ser editado no lugar ou desagrupado; o preenchimento muda pelo painel de cor, e o painel Transformar tem uma trava para escala proporcional.

Em cada um dos quatro, a edição tentadora é selecionar tudo e aplicar um traço, um efeito ou um gradiente. O traço é o que falha em silêncio, e a seção depois da próxima explica a geometria. Recolora o preenchimento, e só o preenchimento.

Como colocar um QR code SVG no Canva, InDesign, Word e PowerPoint

As ferramentas de diagramação e de escritório recebem um SVG como imagem e não como formas editáveis, o que está bem para um QR code: o código precisa ser inserido e dimensionado, não redesenhado. O Canva o envia, o InDesign o insere, e Word e PowerPoint para Microsoft 365 o inserem pelo menu Imagens.

• Canva. Envie o SVG pelo painel Uploads e arraste para o design. O Canva aceita envio de SVG, com um limite de tamanho de arquivo que a central de ajuda informa por plano - um QR code SVG tem poucos kilobytes, então o limite não é a questão; se o envio é permitido em um dado plano é, e a própria página de requisitos de envio do Canva é onde confirmar. Se um envio de SVG for recusado, envie no lugar um PNG exportado no tamanho final impresso. Criar um QR code no Canva cobre o caminho inteiro, e a comparação KoloQR vs Canva explica por que a exportação SVG do próprio Canva é o caminho mais difícil.
• Adobe InDesign. Arquivo, depois Inserir, e clique ou arraste para definir o quadro. O InDesign trata um SVG inserido como gráfico: em geral ele não recolore os preenchimentos, então defina as cores antes de exportar. Mantenha a escala em 100% nos dois eixos ou, quando precisar mudar, mude largura e altura na mesma porcentagem.
• Word e PowerPoint. A página de suporte da Microsoft sobre editar imagens SVG diz que Word, PowerPoint, Outlook e Excel para Microsoft 365 no Windows, Mac, Android e Windows Mobile inserem arquivos SVG por Inserir, depois Imagens, depois Este Dispositivo. Versões perpétuas mais antigas variam, e é por isso que um PNG é o anexo mais seguro quando a versão do destinatário é desconhecida. A opção Converter em Forma da guia Formato Gráfico quebra o código em pedaços editáveis; não há motivo para usá-la em um QR code.
• Google Docs e Slides. Nenhum dos dois importa SVG no momento em que isto é escrito, então insira um PNG. Exporte no dobro do tamanho exibido para ele continuar nítido em uma tela de alta densidade.

Seja qual for a ferramenta, a checagem de tamanho é a mesma. Um QR code impresso quer mais ou menos um centímetro de largura para cada dez centímetros de distância de leitura, e a calculadora de tamanho de impressão transforma uma distância de leitura em uma largura. Redimensione o SVG inserido para essa largura com as proporções travadas, e confira se a zona de silêncio continua dentro do quadro inserido em vez de ser cortada por ele.

Como usar um QR code SVG em uma página web e em uma gráfica

Em uma página web, referencie o SVG a partir de um elemento img com width e height, e ele renderiza nítido em qualquer tela. Em uma gráfica, envie um PDF a menos que a gráfica diga que aceita SVG - o PDF é o formato que a maioria dos formulários de envio nomeia, e o guia irmão explica como fazer um que continue vetorial.

• Como imagem. Uma tag img apontando para o arquivo .svg é o caminho mais simples: o navegador o escala, e uma viewBox sem atributos width ou height preenche o tamanho que a tag lhe der. O exemplo renderiza a 4 pixels CSS por módulo quando a tag tem 196 pixels de largura, o que é um piso sensato para um código que as pessoas vão ler de uma tela.
• Inline. Colar a marcação SVG no HTML permite que o CSS recolora o traçado, o que é útil para um design com modo escuro em que o código precisa virar módulos claros sobre escuro - uma combinação que as câmeras nativas dos celulares geralmente leem e leitores mais antigos muitas vezes não, então teste. Inline também significa que o arquivo é baixado junto com a página em vez de armazenado em cache separadamente.
• Não como imagem de fundo com cover ou contain. Os dois podem cortar ou distorcer a caixa em que o código fica, e uma zona de silêncio cortada é a falha que só aparece em alguns celulares.

Para impressão, a pergunta é o que o fluxo de trabalho da gráfica insere. A maioria nomeia PDF, algumas aceitam SVG, e uns poucos sistemas de produção mais antigos pedem EPS. Os passos para transformar o SVG em um PDF totalmente vetorial, e quando o EPS é a resposta certa, estão em SVG vs PNG vs PDF vs EPS. A checklist de impressão percorre tamanho, contraste e papel antes de o arquivo ir para a tiragem. Uma gravadora a laser usa o próprio SVG, exportado sem fundo; as configurações estão em gravar um QR code a laser.

Regras que mantêm um QR code vetorial legível depois de editado

Um QR code vetorial sobrevive a qualquer edição que deixe a grade de módulos e seu contraste em paz, e falha com qualquer edição que não deixe. Quatro operações são seguras: recolorir o traçado inteiro, redimensionar com as proporções travadas, mover, girar. O resto da lista é o que evitar, com o motivo pelo qual cada uma quebra o código.

• Nunca mova nem apague um nó do traçado. Cada módulo escuro é dado, e cada nó pertence a um. Um módulo arrastado meia célula para a direita é lido como duas células erradas; uma sequência apagada é dado apagado, e a correção de erros gasta seu orçamento nessa perda em vez de nos danos do mundo real.
• Recolora o traçado inteiro, não módulos selecionados. Um código com duas cores de módulo é lido por um leitor como uma cor escura e uma cor clara, e qual é qual depende do limiar que o celular escolhe. Escolha uma escura e uma clara, e confira o par com o verificador de contraste de QR code.
• Mantenha a zona de silêncio. A ISO/IEC 18004 especifica quatro módulos de margem livre em cada lado. Cortar a prancheta rente aos módulos escuros, ou deixar uma moldura ou uma foto invadir a margem, remove o limite que o leitor procura.
• Não aplique traço nos módulos. Um traço é desenhado centrado na borda do traçado, então um traço de um décimo de módulo aumenta cada módulo escuro em um décimo de cada lado e encolhe cada vão claro em um quinto. Isso é geometria, não questão de gosto: com um traço de meio módulo, cada célula clara entre duas escuras se fecha por completo, e o código deixa de ser uma grade.
• Sem gradientes nem transparência nos módulos. Um gradiente deixa alguns módulos mais claros que outros, e um leitor precisa que cada um caia claramente no lado escuro do seu limiar; a transparência deixa o fundo aparecer, o que é o mesmo problema por outro caminho.
• Não escale um eixo só. Um esticamento de 4% é invisível na tela e deixa os padrões de localização fora do quadrado, que é a primeira coisa que um decodificador verifica. Trave as proporções antes de tocar em uma alça.

Duas checagens fecham o ciclo. Solte a arte finalizada no validador de QR code, que informa se o código estilizado ainda decodifica e para o quê, e depois leia uma prova do resultado real - a tela em 100%, ou a folha impressa no tamanho final - com um celular. Estilizar nunca melhora a leitura; o objetivo dessas regras é manter um código editado tão legível quanto o simples de onde ele partiu, e só uma leitura confirma que isso aconteceu.

Onde os downloads grátis de QR code vetorial dão errado

Um QR code SVG grátis de um site de stock ou de ícones é um código que funciona e aponta para o lugar errado, e nenhuma quantidade de edição consegue redirecioná-lo. Vale conhecer os três modos de falha antes do download, porque cada um parece bem na prévia e falha no leitor ou no cliente.

• O SVG de stock codifica o endereço de outra pessoa. A maioria dos QR codes de stock contém https://example.com, o portfólio do artista ou o próprio site de stock. O padrão de módulos é esse endereço, então recolorir, remodelar e rerotular o deixa apontando para lá. Um código de stock impresso em um cardápio manda os clientes para o site de um desconhecido.
• O PNG vetorizado não é uma grade limpa. Um QR code raster passado por uma vetorização automática volta como formas com cantos arredondados, tamanhos de célula levemente desiguais e bordas que já não ficam sobre a grade de módulos. Cada um desses come parte da margem que um decodificador tem para iluminação e ângulo. SVG vs PNG explica por que gerar de novo ganha de vetorizar.
• O código carrega um traço ou uma espessura de linha fotografada. Alguns QR codes vetoriais são desenhados a partir de uma foto ou de um escaneamento de um código impresso, então os módulos carregam o ganho de tinta da impressão original. Um leitor vê módulos escuros mais gordos e claros mais finos desde o início, antes de a próxima impressão acrescentar o próprio ganho.

A regra de decisão é curta. Se você precisa de um marcador de posição para uma maquete, use o exemplo desta página - ele é limpo, é lido e diz para onde aponta. Se você precisa de um código que aponte para a sua página, gere-o: um QR code estático leva segundos para fazer, exporta como SVG sem conta e codifica exatamente o endereço que você digitou. Que tipo de código gerar, estático ou dinâmico, é uma escolha à parte coberta em QR codes estáticos vs dinâmicos; o KoloQR só faz códigos estáticos.