Envolva o seu HTML e CSS inline num SVG escalável através de foreignObject. Pré-visualize em direto e transfira um ficheiro .svg pronto a usar. Tudo funciona no seu navegador.
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.
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.
Use esta ferramenta quando o resultado for apresentado num navegador, porque os navegadores renderizam foreignObject de forma nativa e mantêm-no nítido. Se precisar de uma imagem de pixels que funcione em todo o lado - em aplicações de mensagens, documentos ou software de design - renderize a mesma marcação com o nosso conversor HTML para imagem, que produz PNG, JPG ou PDF. As duas ferramentas complementam-se: uma mantém o seu HTML como vetor escalável, a outra congela-o numa imagem de pixels.
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.