Descrição Overview Descripción
Vetores e pixels são duas formas fundamentalmente diferentes de representar uma imagem — e entender essa diferença é entender por que o SVG existe. Um arquivo JPEG ou PNG é uma grade de pixels: cada ponto tem uma cor e a imagem só faz sentido em tamanhos próximos à sua resolução original. Ampliar muito resulta em embaçamento. Um arquivo SVG, por outro lado, é um documento XML que descreve formas matemáticas: círculos, curvas de Bézier, caminhos, gradientes. O vetor pode ser ampliado infinitamente sem perder nitidez porque, em vez de armazenar pixels, armazena instruções de como desenhá-los. O W3C padronizou o SVG em 1999, com contribuição de Jon Ferraiolo, da Adobe. Por anos foi ignorado pelos navegadores — o IE 8 ainda não o suportava em 2009 — mas com a proliferação de telas Retina (a Apple lançou o iPhone 4 com 326 PPI em 2010), o SVG se tornou indispensável: ícones e logotipos que precisam parecer nítidos em 1x, 2x e 3x não podem depender de uma grade de pixels fixa.
O PNG tem uma história que começa com uma briga de patente. Em 1994, a Unisys relembrou que detinha a patente do algoritmo LZW, usado pelo GIF. Todos os softwares que geravam GIFs passariam a dever royalties — o que gerou uma reação imediata da comunidade open source. Thomas Boutell e vários colaboradores criaram o PNG em 1995 como substituto livre: compressão sem perdas com filtros de linha (DEFLATE), suporte a 24 bits de cor e, mais importante, canal alpha — transparência real com gradiente, não a transparência binária do GIF. O nome é um acrônimo recursivo orgulhosamente irreverente: Portable Network Graphics, mas a comunidade também leu como PNG's Not GIF. O JPEG é mais antigo: o grupo Joint Photographic Experts Group definiu o padrão em 1992 para resolver um problema real da época — comprimir fotografias digitalizadas para caber em CD-ROMs. A compressão com perdas baseada em transformada discreta do cosseno (DCT) permitia razões de 10:1 sem degradação perceptível ao olho humano, algo revolucionário quando discos tinham 650 MB e conexões discadas eram lentas.
Rasterizar um SVG significa executar as instruções matemáticas e gravar o resultado numa grade de pixels — um processo irreversível. Esta ferramenta faz isso no canvas do HTML5 diretamente no navegador, sem enviar nada para servidor. Escolha PNG quando precisar de transparência, capturas de interface ou qualquer coisa que não tolere artefatos de compressão. Escolha JPEG quando o destino for foto ou ilustração com muitos tons e o tamanho do arquivo importar mais que a nitidez absoluta. Definir a largura de saída antes de exportar garante que o resultado já chegue no tamanho certo para redes sociais, documentos ou pipelines de imagem.
Vectors and pixels are two fundamentally different ways to represent an image — and understanding that difference is understanding why SVG exists. A JPEG or PNG file is a grid of pixels: each point has a color, and the image only makes sense at sizes close to its original resolution. Scale it up too far and it blurs. An SVG file, on the other hand, is an XML document describing mathematical shapes: circles, Bézier curves, paths, gradients. The vector can be scaled infinitely without quality loss because instead of storing pixels, it stores instructions for how to draw them. The W3C standardized SVG in 1999, with contributions from Jon Ferraiolo of Adobe. For years, browsers largely ignored it — IE 8 still had no support in 2009 — but with the proliferation of Retina displays (Apple launched the iPhone 4 with 326 PPI in 2010), SVG became indispensable: icons and logos that need to look sharp at 1x, 2x, and 3x cannot depend on a fixed pixel grid.
PNG has a history that begins with a patent dispute. In 1994, Unisys reminded the industry that it held the patent on the LZW algorithm used by GIF. Any software generating GIFs would owe royalties — which triggered an immediate response from the open source community. Thomas Boutell and collaborators created PNG in 1995 as a free alternative: lossless compression with row filters (DEFLATE), 24-bit color support, and most importantly an alpha channel — real gradient transparency, not GIF's binary on/off. The name is a proudly irreverent recursive acronym: Portable Network Graphics, but the community also read it as PNG's Not GIF. JPEG is older: the Joint Photographic Experts Group defined the standard in 1992 to solve a real problem — compressing scanned photographs to fit on CD-ROMs. The lossy compression based on Discrete Cosine Transform (DCT) enabled 10:1 ratios without perceptible degradation to the human eye, revolutionary when discs held 650 MB and dial-up connections were slow.
Rasterizing an SVG means executing its mathematical instructions and recording the result in a pixel grid — an irreversible process. This tool does that on an HTML5 canvas directly in the browser, without sending anything to a server. Choose PNG when you need transparency, UI screenshots, or anything that cannot tolerate compression artifacts. Choose JPEG when the target is a photo or illustration with many tones and file size matters more than absolute sharpness. Setting the output width before exporting ensures the result arrives at the right size for social networks, documents, or image pipelines.
Los vectores y los píxeles son dos formas fundamentalmente distintas de representar una imagen — y entender esa diferencia es entender por qué existe el SVG. Un archivo JPEG o PNG es una cuadrícula de píxeles: cada punto tiene un color y la imagen solo tiene sentido en tamaños próximos a su resolución original. Ampliarlo demasiado produce desenfoque. Un archivo SVG, en cambio, es un documento XML que describe formas matemáticas: círculos, curvas de Bézier, trazados, degradados. El vector puede escalarse infinitamente sin perder nitidez porque, en lugar de almacenar píxeles, almacena instrucciones para dibujarlos. El W3C estandarizó el SVG en 1999, con la contribución de Jon Ferraiolo, de Adobe. Durante años los navegadores lo ignoraron casi por completo — IE 8 todavía no lo soportaba en 2009 — pero con la proliferación de las pantallas Retina (Apple lanzó el iPhone 4 con 326 PPI en 2010), el SVG se volvió indispensable: los iconos y logotipos que deben verse nítidos en 1x, 2x y 3x no pueden depender de una cuadrícula de píxeles fija.
El PNG tiene una historia que empieza con una disputa de patentes. En 1994, Unisys recordó que era titular de la patente del algoritmo LZW, utilizado por el GIF. Cualquier software que generara GIFs debería pagar royalties — lo que provocó una reacción inmediata de la comunidad open source. Thomas Boutell y varios colaboradores crearon el PNG en 1995 como alternativa libre: compresión sin pérdidas con filtros de fila (DEFLATE), soporte de color de 24 bits y, lo más importante, canal alpha — transparencia real con gradiente, no la transparencia binaria del GIF. El nombre es un acrónimo recursivo orgullosamente irreverente: Portable Network Graphics, aunque la comunidad también lo leía como PNG's Not GIF. El JPEG es anterior: el grupo Joint Photographic Experts Group definió el estándar en 1992 para resolver un problema real — comprimir fotografías escaneadas para que cupieran en CD-ROM. La compresión con pérdidas basada en la Transformada Discreta del Coseno (DCT) permitía ratios de 10:1 sin degradación perceptible para el ojo humano, algo revolucionario cuando los discos tenían 650 MB y las conexiones de módem eran lentas.
Rasterizar un SVG significa ejecutar sus instrucciones matemáticas y registrar el resultado en una cuadrícula de píxeles — un proceso irreversible. Esta herramienta lo hace en un canvas de HTML5 directamente en el navegador, sin enviar nada al servidor. Elige PNG cuando necesites transparencia, capturas de interfaz o cualquier cosa que no tolere artefactos de compresión. Elige JPEG cuando el destino sea una foto o ilustración con muchos tonos y el tamaño del archivo importe más que la nitidez absoluta. Definir el ancho de salida antes de exportar garantiza que el resultado llegue con las dimensiones correctas para redes sociales, documentos o pipelines de imagen.
Detalhamento técnico
Pontos frequentes
- O arquivo SVG sai do meu computador?: Não. A leitura e a rasterização ocorrem no navegador; nenhum upload é feito para a GigaCode.
- Por que JPEG pode mudar o fundo transparente?: JPEG não suporta alpha. A ferramenta preenche o fundo com branco antes de exportar.
- Para que serve esta ferramenta?: Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
- Meus dados são enviados a algum servidor?: O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
- Posso usar em produção ou para dados reais?: Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Trecho para testar
- Há também o bloco "Exemplo de Código" com o trecho completo; use esse texto rápido para colar nos campos e validar: Dica — PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
Technical deep dive
Common questions summarized
- Does my SVG leave my computer?: No. Reading and rasterization happen in the browser; nothing is uploaded to GigaCode.
- Why can JPEG change a transparent background?: JPEG has no alpha channel. The tool fills the background with white before export.
- What is this tool for?: It runs fully in your browser: useful to validate, format, or convert data in everyday development.
- Are my inputs sent to a server?: Processing happens locally with JavaScript. We do not store what you paste into the text areas.
- Can I use this for real production data?: Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Sample payload to try
- See also the larger "Code Snippets" sample; paste this excerpt to try locally: Tip — PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
Detalle técnico
Ideas claras antes de usar la herramienta
- ¿Sale el SVG de mi equipo?: No. La lectura y la rasterización ocurren en el navegador; no hay subida a GigaCode.
- ¿Por qué JPEG puede cambiar el fondo transparente?: JPEG no admite canal alpha. La herramienta rellena el fondo en blanco antes de exportar.
- ¿Para qué sirve esta herramienta?: Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
- ¿Se envían mis datos a algún servidor?: El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
- ¿Puedo usarlo con datos reales en producción?: Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.
Fragmento corto para probar
- Debajo aparece también el ejemplo largo en "Fragmentos de Código"; pega esta versión corta: Consejo — PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
Exemplo de Código Code Snippets Fragmentos de Código
PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
Dica Tip Consejo
PNG: transparência preservada. JPEG: fundo branco onde havia transparência.
Perguntas frequentes FAQ Preguntas frecuentes
O arquivo SVG sai do meu computador?
Does my SVG leave my computer?
¿Sale el SVG de mi equipo?
Não. A leitura e a rasterização ocorrem no navegador; nenhum upload é feito para a GigaCode.
No. Reading and rasterization happen in the browser; nothing is uploaded to GigaCode.
No. La lectura y la rasterización ocurren en el navegador; no hay subida a GigaCode.
Por que JPEG pode mudar o fundo transparente?
Why can JPEG change a transparent background?
¿Por qué JPEG puede cambiar el fondo transparente?
JPEG não suporta alpha. A ferramenta preenche o fundo com branco antes de exportar.
JPEG has no alpha channel. The tool fills the background with white before export.
JPEG no admite canal alpha. La herramienta rellena el fondo en blanco antes de exportar.
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.