SVG se rasteriza a JPG aplanando los paths vectoriales en cuadrícula de píxeles.Elige la resolución de salida y la calidad (1-100). JPG es universal y compacto para fotos; SVG pierde la escalabilidad y animación al rasterizar, así que guarda el original para re-exportar.
Comparativa SVG vs JPG
| Propiedad | SVG | JPG |
|---|---|---|
| Tipo de formato | Vector (paths XML) | Raster (cuadrícula de píxeles) |
| Escalable a cualquier tamaño | Sí (zoom infinito sin pérdida) | No (borroso al ampliar) |
| Logo típico | 1-10 KB | 30-50 KB |
| Editable en editor de texto | Sí (XML legible) | No (DCT binario) |
| Año de introducción | 2001 (W3C SVG 1.0) | 1992 (ISO 10918) |
| Soporte navegador | Universal (~100%) | Universal (~100%) |
| Ideal para | Logos, iconos, diagramas | Fotos, imágenes reales |
| Animación | Sí (SMIL + CSS + JS) | No |
| CSS/JS interactivo | Sí (direccionable vía DOM) | No |
| Profundidad de color | 24-bit + gradientes + filtros | 8 bits/canal |
| Inline en HTML | Sí (sin fetch aparte) | No (petición <img> aparte) |
| Método de conversión | Rasterizar a resolución elegida | Comprimir a calidad elegida |
SVG a JPG — Rasterizador Vectorial en el Navegador a Cualquier Resolución
Rasteriza gráficos vectoriales SVG (W3C SVG 1.1 Second Edition, Recommendation 16 de agosto de 2011 / W3C SVG 2 Candidate Recommendation 4 de octubre de 2018, con desarrollo activo continuando como Editor's Draft en svgwg.org/svg2-draft) al formato JPG universalmente compatible usando la pipeline drawImage() del Canvas 2D Context del HTML Living Standard de WHATWG (html.spec.whatwg.org/#dom-context-2d-drawimage). El navegador carga el SVG en un HTMLImageElement, lo dibuja en un canvas a las dimensiones objetivo elegidas y serializa el bitmap como JPEG envuelto en JFIF (Hamilton, C-Cube Microsystems, 1 de septiembre de 1992; ITU-T T.81 baseline DCT, 18 de septiembre de 1992) vía HTMLCanvasElement.toBlob('image/jpeg', quality). Los SVG cargados vía el elemento img se procesan en 'secure static mode' o 'secure animated mode' según las reglas de conformidad de SVG 2 §2.2.4 (secure animated mode) / §2.2.6 (secure static mode) — los scripts y recursos externos quedan bloqueados, así que el paso de rasterización no puede ejecutar JavaScript embebido en el SVG. La calidad 1–100 mapea al escalado de tablas de cuantización JPEG según el Anexo K de ITU-T T.81. Como JPEG no tiene canal alfa, las regiones transparentes del SVG se componen contra un color de fondo configurable (blanco por defecto) antes de codificar. La rasterización ocurre en la codificación sRGB del búfer del canvas (IEC 61966-2-1:1999) independientemente del perfil de color declarado del SVG. Los archivos nunca salen del dispositivo.
Cómo convertir SVG a JPG
- Arrastra un .svg a la herramienta o haz clic para seleccionarlo. El navegador parsea el SVG vía su renderer SVG integrado (cargado como <img> en secure mode — scripts y recursos externos bloqueados).
- Elige las dimensiones de salida. Tamaños mayores en píxeles producen salida ráster más nítida pero archivos JPEG más pesados; elige 2× el tamaño de display para pantallas Retina, o el objetivo exacto que espera el destino.
- Fija el nivel de calidad JPG (1–100). 85 es el punto dulce web estándar según el Anexo K de ITU-T T.81; 90+ se aproxima a visualmente sin pérdida; por debajo de 70 produce bloques y ringing visibles.
- Elige un color de fondo para el composite alfa — las regiones transparentes del SVG se rellenan contra este color antes de la codificación JPEG (blanco por defecto).
- Descarga el JPG. El SVG original queda intacto en el disco — los archivos nunca salen del dispositivo.
Casos de uso comunes
- Producir versiones JPG ráster de logos vectoriales para plataformas que rechazan subidas .svg (la mayoría de CMS no-de-diseño, redes sociales, flujos de imprenta).
- Renderizar iconos SVG a un tamaño de píxel concreto para una diapositiva de presentación, figura de documento o entrega de diseño donde el destino espera ráster.
- Crear fallbacks JPG para plantillas de correo donde el soporte SVG es irregular entre clientes (Outlook escritorio carece notablemente de renderizado SVG fiable).
- Exportar arte SVG como JPG para envíos a bancos de imágenes, archivos fotográficos o paneles de analítica que requieren formatos ráster de entrada.
- Producir variantes JPG de resolución fija desde un único máster SVG para entradas srcset responsive (1× / 2× / 3×).
Preguntas frecuentes
¿Por qué rasterizar un SVG infinitamente escalable?
Porque muchos destinos solo aceptan formatos ráster — clientes de correo (Outlook escritorio notablemente), CMS heredados, subidas a redes sociales, flujos de imprenta, envíos a bancos de imágenes, paneles de analítica. Una vez rasterizado, el JPG tiene dimensiones fijas; elígelas con cuidado (2× el tamaño de display para Retina, o el objetivo exacto en píxeles que espera el destino). El SVG original queda en disco para futuras rasterizaciones a tamaños distintos.
¿Se ejecutan los scripts del SVG durante la conversión?
No. Los SVG cargados vía el elemento <img> se procesan en 'secure static mode' o 'secure animated mode' según las reglas de conformidad de W3C SVG 2 §2.2.4 (secure animated mode) / §2.2.6 (secure static mode) — scripts, cargas HTTP externas y DOM scripting quedan todos bloqueados. Esta herramienta usa la vía <img> deliberadamente para que un SVG malicioso no pueda exfiltrar datos ni ejecutar código durante la rasterización. Los SVG cargados vía <object> o <svg> inline ejecutarían scripts; esta herramienta no usa esas vías.
¿A qué tamaño renderizar?
Elige el doble del tamaño de display para pantallas Retina / alta DPI, o el tamaño exacto en píxeles que espera el destino. Ir mayor de lo necesario infla el archivo JPG sin beneficio visible porque el destino reescalará igualmente. SVG puede renderizar a cualquier resolución sin pérdida, así que re-rasterizar a otro objetivo siempre sale más barato que partir de un JPG demasiado pequeño.
¿El SVG pierde detalle en el JPG?
SVG es vectorial, así que no hay pérdida de detalle hasta rasterizar. El JPG se verá tan nítido como permita la resolución en píxeles elegida; más allá de ese tamaño se difumina al ampliar porque los píxeles ráster no pueden reconstruirse sin pérdida. Recodificar a JPG también introduce cuantización con pérdida según el Anexo K de ITU-T T.81 — a calidad 85+ la pérdida suele ser invisible; por debajo de 70 se hace visible. Para salida ráster sin pérdida usa la herramienta svg-to-png.
¿Y los SVG que contienen foreignObject?
Los SVG que incluyen elementos <foreignObject> contaminan el canvas (origin-clean = false) según el issue #10641 de WHATWG html.spec.whatwg.org, lo que provoca que toBlob() lance un SecurityError. La conversión fallará. Los SVG planos (paths, formas, texto, gradientes, primitivas de filtro) rasterizan con limpieza. Si tu SVG tiene contenido foreignObject, elimínalo o pre-renderízalo en un editor de escritorio antes de traerlo a esta herramienta.
Por qué rasterizar un SVG infinitamente escalable — y los matices de secure-mode y foreignObject
La representación vectorial de SVG escala sin pérdida de precisión, pero muchos destinos requieren entrada ráster de píxeles fijos — JPG es el mínimo común denominador universalmente aceptado. La conversión es una pipeline en dos pasos: (1) el navegador parsea el SVG y lo renderiza en un HTMLImageElement a las dimensiones objetivo, aplicando CSS, gradientes, primitivas de filtro y fallbacks de fuentes; (2) drawImage() copia ese bitmap renderizado a un canvas, donde toBlob('image/jpeg', quality) re-codifica vía el codificador JPEG integrado del navegador. El control de calidad (1–100) mapea al escalado de tablas de cuantización JPEG según el Anexo K de ITU-T T.81 — 85 es el punto dulce web estándar, 90+ se aproxima a visualmente sin pérdida, por debajo de 70 produce bloques 8×8 y ringing visibles. Aplican dos matices de seguridad: (a) los SVG cargados vía <img> corren en secure mode — scripts, cargas HTTP externas y DOM scripting quedan bloqueados. Los SVG cargados vía <object> o <svg> inline en HTML ejecutan scripts y SÍ pueden cargar recursos externos, así que esta herramienta usa la vía <img> deliberadamente. (b) Los SVG que contienen <foreignObject> contaminan el canvas (origin-clean = false) según el issue #10641 de WHATWG html.spec.whatwg.org, lo que significa que toBlob() lanzará un SecurityError. Los SVG planos (paths, formas, texto, gradientes, filtros) rasterizan con limpieza. La salida es típicamente mayor que el SVG origen para contenido tipo icono (los paths vectoriales comprimen más pequeño que el equivalente ráster con DCT) pero menor para contenido SVG con detalle fotográfico. La rasterización opera en sRGB de 8 bits según IEC 61966-2-1:1999 — las declaraciones de color de gama amplia en el SVG (CSS color-mix(), valores Display P3) se mapean tonalmente a sRGB durante el drawImage.
- Origen SVG parseado según W3C SVG 1.1 Second Edition (16 de agosto de 2011) + SVG 2 Candidate Recommendation
- Rasterización del lado navegador vía WHATWG Canvas drawImage con SVGImageElement (secure static / animated mode)
- Ancho y alto de salida personalizados — renderiza al tamaño exacto en píxeles que necesita el destino
- Bloqueo de proporción — preserva las proporciones nativas del viewBox del SVG
- Calidad JPEG ajustable 1–100 mapeada a las tablas de cuantización del Anexo K de ITU-T T.81
- Color de fondo configurable para componer alfa (SVG transparente → JPEG opaco)
- Contenedor de salida JFIF v1.02 (Hamilton, C-Cube Microsystems, 1 de septiembre de 1992)
- Opera en sRGB (IEC 61966-2-1:1999) a precisión de 8 bits; los valores de color del SVG rasterizan a sRGB
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (6)
- W3C (SVG Working Group) (2011). Scalable Vector Graphics (SVG) 1.1 (Second Edition). W3C Recommendation 16 August 2011 (w3.org/TR/SVG11/) — source SVG bitstream specification; defines path/shape/text/filter elements, ViewBox + preserveAspectRatio scaling, and the 'secure static mode' / 'secure animated mode' processing rules that apply when an SVG is loaded as an image.
- W3C (SVG Working Group) (2018). Scalable Vector Graphics (SVG) 2. W3C Candidate Recommendation 4 October 2018 (w3.org/TR/SVG2/; active development continues as the Editor's Draft at svgwg.org/svg2-draft, last updated September 2025) — successor spec carrying CSS3 integration, geometry property unification, and the modern hatching/markers used by browser-side SVG renderers.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() with SVGImageElement. html.spec.whatwg.org/#dom-context-2d-drawimage + canvas section 4.12.5 — browser rasterisation mechanism: load SVG into HTMLImageElement → drawImage onto canvas at target pixel dimensions → toBlob('image/jpeg', quality). SVGs loaded via <img> are processed in secure mode (scripts and external resources blocked); SVGs containing <foreignObject> taint the canvas (origin-clean = false). Issue github.com/whatwg/html/issues/10641 (filed September 2024) tracks the normative discussion of SVG-as-Image canvas-tainting interop.
- ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — target JPEG baseline DCT bitstream; quality 1–100 maps to Annex K quantisation tables.
- Hamilton, E. (C-Cube Microsystems) (1992). JPEG File Interchange Format (JFIF) Version 1.02. 1 September 1992 — target de facto JPEG container; APP0 marker, density units, thumbnail handling.
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; SVG colour stops in CSS named colours, hex, or RGB are interpreted as sRGB during rasterisation.
Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.
Guías relacionadas
Por Marco B. ·