Editor y explicador de SVG
SVG Editor and Explainer
Edita un SVG junto a su render en vivo y explica el archivo: viewBox y escalado, transformaciones, cada comando de trazado, el color heredado, los bytes desperdiciados y qué se rompe dentro de un <img>, de un data URI o en línea.
Edita un SVG con el resultado al lado y lee un panel que dice qué es realmente el archivo: si escalará, qué hace cada transformación en su camino hasta una forma, qué dice el atributo d comando a comando, cómo se resuelve un relleno a través de la herencia, cuántos bytes cuestan los restos del editor, y qué se rompe cuando el mismo archivo se usa como <img>, como fondo CSS o pegado en línea. Cada hallazgo apunta al atributo exacto del que trata. Es un conjunto de reglas sobre el archivo analizado, no un modelo, así que informa de lo que hay y nunca adivina para qué es el archivo.
Código del SVG
Suelta un archivo .svg
Se lee en esta pestaña. No se sube nada.
Escribe aquí y la vista previa te sigue. Haz clic en una figura de la vista previa y el código salta a su elemento.
Vista previa
Los contornos en los que se puede hacer clic cubren las figuras cuya caja se puede deducir del archivo. <text>, <use> y un <image> sin tamaño necesitan un renderizador, así que esos se seleccionan desde el código.
Se dibuja en un marco aislado a partir del marcado reconstruido desde el árbol analizado, nunca desde tus bytes. El marco es una caja fija y al archivo se le da entera, que es lo que hace visible que un documento que no puede escalar se niegue a llenarla.
Bytes
395
Elementos
5
Figuras
3
Comandos de trazado
10
Anidamiento más profundo
1
Qué es este archivo
- notaMarco
Con tamaño, y escala
width="24" y height="24" le dan un tamaño intrínseco, y viewBox="0 0 24 24" convierte ese tamaño en un punto de partida y no en un límite. Dale otro ancho en CSS y todo lo de dentro se reescala para encajar. Es lo que quieres para un icono.
- notaCoordenadas
Una unidad de usuario, y lo que vale
Las coordenadas de dentro van de 0 a 24 en horizontal y de 0 a 24 en vertical. Con el ancho declarado de 24, una unidad de usuario se dibuja como 1 píxel CSS, y ese número cambia con el tamaño que se le dé de verdad al archivo.
- notaTrazados
Comandos absolutos y relativos mezclados
3 comandos absolutos y 6 relativos en el mismo trazado. Los dos son válidos y dibujan la misma figura; la diferencia práctica es que un trazado del todo relativo se puede mover editando solo la primera M, y este no.
- notaPintura
currentColor: el color lo decide la página
1 atributo pinta con currentColor, que se resuelve en la propiedad CSS `color` heredada en el punto donde está el SVG. Incrustado en una página, es justo lo que quieres de un icono: toma el color del texto que lo rodea y sigue un cambio de tema sin esfuerzo. Usado como <img> o como background-image de CSS no se resuelve contra nada y sale negro, porque no hay ningún elemento del que heredar.
- notaAccesibilidad
Nombre: «보관함에 저장»
<title> es el nombre accesible del gráfico, y la mayoría de los visores también lo muestran como información emergente al pasar el cursor por encima; por eso un <title> escrito como un nombre de archivo es peor que no tener ninguno. Este dice «보관함에 저장».
- notaAccesibilidad
Sin <desc>
<title> es el nombre corto; <desc> es la descripción larga para un gráfico cuyo contenido importa: una gráfica, un diagrama, un mapa. Un icono no la necesita, y añadir una vacía es peor que no ponerla.
Elemento seleccionado
Haz clic en una figura de la vista previa, o pon el cursor dentro de un elemento en el código.
Quitar lo que sobra con el optimizador de SVG · Convertirlo en un data URI de CSS · Trabajar un trazado por separado
Cómo se usa
Pega el SVG o suelta el archivo
La caja de código acepta un pegado y la zona de arrastre acepta un .svg. Todo se lee en esta pestaña. Los cuatro ejemplos encima de los paneles merecen un clic primero: cada uno es una forma distinta de archivo real, y el informe dice algo distinto de cada uno.
Lee primero la sección del marco
Dice cuál de cuatro formas es este documento, y eso decide la mayor parte de lo que sigue. Un viewBox con width y height escala y tiene un tamaño propio; un viewBox solo llena la caja que le den; un width y height sin viewBox no escala en absoluto, que es por lo que un icono copiado de una herramienta de diseño tantas veces se niega a cambiar de tamaño. La vista previa le da al archivo una caja fija, así que puedes ver cuál de ellas es.
Pulsa una forma para alinear los dos paneles
Pulsar un contorno en la vista previa pone el cursor en ese elemento del código y rellena el panel del elemento: la cadena de transformaciones desde el elemento más externo hacia abajo, qué hace la matriz acumulada, la pintura según se resuelve por herencia, y para un trazado, cada comando en lenguaje llano. Mover el cursor en el código selecciona en la otra dirección.
Usa los botones «muéstrame» en lugar de buscar
Cada hallazgo lleva el rango del código del que trata, así que su botón selecciona exactamente esos caracteres: el segundo degradado con el id duplicado, no el primero, y el atributo concreto y no la etiqueta que lo rodea.
Lleva los hallazgos de tamaño al optimizador
La sección de tamaño cuenta bytes y nombra qué son —metadatos del editor, un degradado sin usar, siete decimales que nadie eligió—, pero esta herramienta no reescribe tu archivo. El optimizador de SVG hace esa pasada sobre el documento entero de una vez, y muestra una diferencia antes/después para que compruebes que nada se movió.
Preguntas frecuentes
¿Por qué mi icono no se agranda cuando le pongo un width en CSS?
Casi siempre porque el archivo tiene width y height pero no viewBox. Sin él, las unidades de usuario son píxeles CSS y el navegador no tiene ninguna correspondencia con la que reescalar: la caja crece y el dibujo se queda quieto. La sección del marco lo dice y propone el viewBox exacto que añadir, que suele ser «0 0 <width> <height>» con los números que ya están en el archivo.
Puse dos iconos en línea y el segundo perdió su degradado. ¿Por qué?
Sus ids chocaron. Las herramientas de diseño generan nombres como a, Layer_1 y SVGID_1_, y una vez que los dos archivos están en una página, cada url(#a) resuelve al que apareció primero en el documento, así que el segundo icono toma prestado en silencio el degradado o la máscara de recorte del primero. La sección de portabilidad señala los ids generados por el exportador exactamente por esto. Prefija cada id con algo único del archivo antes de ponerlo en línea.
El archivo funciona en mi página y se ve en blanco como fondo CSS. ¿Qué cambió?
Tres cosas difieren, y el informe nombra la que aplique. Un xmlns ausente lo perdona el analizador HTML y es fatal en todos los demás sitios. currentColor no tiene nada de lo que heredar fuera de una página, así que sale negro. Las referencias externas no se descargan en absoluto en un <img> o en un background-image, así que el elemento que las necesita no dibuja nada. Y un # en un color hexadecimal trunca un data URI salvo que se escriba como %23.
Un agujero de mi trazado se rellena de sólido. ¿Lo muevo?
No: inviértelo. Bajo el fill-rule="nonzero" por defecto, un bucle interior es un agujero solo cuando gira en sentido contrario al bucle que lo contiene, así que un agujero que se rellena es un problema de dirección, no de posición. La sección del trazado dice cuántos subtrazados hay y qué regla decide. Invertir un subtrazado es lo que hace la herramienta de trazados SVG.
Encontró un <script> en un archivo que me enviaron. ¿Es peligroso?
Depende enteramente de adónde vaya el archivo, y el informe dice cuál es el caso. Pegado en línea en una página, el script de un SVG corre con el origen de esa página: sus cookies, su almacenamiento, su DOM. Cargado como <img> o como fondo CSS no corre nunca. La vista previa de aquí lo eliminó antes de dibujar, y el marco en que dibuja no puede ejecutar scripts de ninguna manera, así que mirar el archivo en esta herramienta es seguro en cualquier caso.
¿Por qué el panel de pintura no coincide con lo que veo?
Porque el archivo tiene un bloque <style> y este informe no lo aplica. Resolver selectores CSS necesita un motor CSS; cada valor citado aquí viene solo de atributos de presentación y estilos en línea. El informe lo dice allí donde existe un bloque <style> en lugar de mostrar en silencio un valor que la hoja de estilos ha sobrescrito.
Puede recibir de
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
SVG a data URI para CSS
SVG to CSS Data URI
Codifica un SVG como data URI de fondo en CSS, escapando solo lo imprescindible para que ocupe poco.
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
Editor de trazados SVG
SVG Path Editor
Convierte los datos de un trazado entre comandos absolutos y relativos, lo desplaza, escala, gira e invierte, y muestra su caja envolvente con vista previa.
SVG a PNG
SVG to PNG
Renderiza un SVG a PNG, JPEG o WebP en cualquier factor de escala, con fondo transparente o relleno.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.