How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

HTML para SVG

Envolva o seu HTML e CSS inline num SVG escalável com foreignObject. Pré-visualize em direto e transfira como .svg, PNG ou JPG. Tudo corre no seu navegador.

Marcação HTML

Largura

Altura

Formato

Pré-visualização

Código SVG

HTML dentro de um vetor escalável

O elemento foreignObject do SVG permite incorporar HTML e CSS ativos dentro de uma imagem vetorial. O resultado é perfeitamente escalável e pode ser usado em qualquer lado onde um SVG seja aceite — ideal para emblemas, cartões e etiquetas com estilo.

Porquê envolver HTML num SVG?

Um SVG criado com foreignObject não é uma captura de ecrã - a sua marcação continua ativa dentro do ficheiro. O texto continua a ser texto real, o CSS inline continua a aplicar-lhe estilo e nada é rasterizado, pelo que o gráfico se mantém perfeitamente nítido em qualquer nível de zoom, ocupando normalmente apenas alguns kilobytes. Por isso, esta abordagem é ideal para emblemas de README, cartões de perfil, widgets de dashboards e qualquer outro sítio onde queira que um excerto de HTML com estilo se comporte como um único ficheiro de imagem que pode alojar, incorporar ou versionar.

Vetor ou captura de ecrã - de qual precisa?

Utilize esta ferramenta quando o resultado for apresentado num navegador web, porque os navegadores compõem foreignObject de forma nativa e mantêm-no nítido. Um vetor mantém a sua marcação viva e escalável, pelo que continua nítida em qualquer tamanho e o ficheiro permanece pequeno. Uma captura, pelo contrário, congela essa mesma marcação numa grelha fixa de píxeis: prática onde o SVG não é suportado, mas depois não pode voltar a ser estilizada nem ampliada.

Perguntas frequentes

Tudo o que precisa de saber sobre a conversão de HTML para SVG.

O seu HTML é colocado dentro de um <foreignObject> do SVG, que os navegadores renderizam como parte do vetor. O conjunto é escalável sem pixelizar.

O CSS inline e as imagens em data-URI funcionam melhor. Os recursos externos podem não carregar quando o SVG é aberto fora do seu site, por isso incorpore tudo o que puder.

Não. O SVG é gerado inteiramente no seu navegador.

Sim. Introduza a largura e a altura em pixels antes de gerar. Definem a tela do SVG e o respetivo viewBox e, como o ficheiro é vetorial, pode redimensioná-lo depois sem perder nitidez.

O foreignObject é renderizado pelos navegadores web, mas muitos editores gráficos, como o Inkscape ou o Illustrator, não o suportam totalmente. Para melhores resultados, use o SVG em páginas web ou em ferramentas baseadas no navegador.

Esta ferramenta mantém a sua marcação como vetor e nunca a rasteriza. Se precisar de uma imagem de pixels, renderize o mesmo HTML com a nossa ferramenta HTML para imagem, que produz PNG, JPG ou PDF.