Vector
La imagen se describe con formas, rutas y coordenadas en lugar de píxeles fijos, por eso escala con nitidez.
SVG Studio
Infinite Resolution Analytics
Edit and preview SVG code instantly. Experience the magic of crisp vector graphics.
SVG Code Editor
Live Preview
SVG convierte gráficos vectoriales nítidos en código editable
Iconos, logotipos simples, diagramas y detalles de interfaz suelen funcionar bien como SVG porque se mantienen nítidos a cualquier tamaño. SVG Studio permite editar el marcado, previsualizar cambios, copiar código y guardar un archivo SVG desde el navegador.
Conceptos de SVG
viewBox
Define el sistema de coordenadas interno y controla cómo encaja el arte en distintos tamaños.
Vista previa saneada
El componente usa DOMPurify con perfil SVG antes de insertar el marcado editado en la vista previa.
Cómo usarlo
- Pega marcado SVG en el editor o modifica el ejemplo inicial.
- Comprueba la vista previa en vivo al cambiar formas, colores y dimensiones.
- Copia el código final o guárdalo como archivo SVG para tu proyecto.
Preguntas frecuentes
¿Puedo pegar SVG de otra fuente?
Sí, pero revisa cualquier SVG de terceros antes de usarlo en producción y elimina contenido innecesario o sospechoso.
¿Es principalmente un conversor a PNG?
La página se centra en editar, previsualizar, copiar y guardar SVG. La conversión raster puede requerir otro paso.
¿Por qué la vista previa puede diferir de mi sitio?
El CSS del contenedor, colores heredados, fuentes y restricciones de diseño pueden cambiar cómo se ve el mismo SVG.
Antes de publicar SVG en producción, verifica seguridad, accesibilidad, licencia y renderizado en el proyecto final.