Editor SVG
Edita archivos SVG en tu navegador. Pega codigo, vista previa en vivo, cambia dimensiones y colores, descarga SVG modificado.
Caracteristicas principales
- Vista previa en vivo del código SVG
- Edición de ancho, alto y viewBox
- Buscar y reemplazar colores
- Descarga o copia del SVG modificado
Guide
SVG (Scalable Vector Graphics) es un formato de imagen basado en XML que describe formas, trazados y texto usando coordenadas matemáticas en lugar de rejillas de píxeles. A diferencia de los formatos raster (PNG, JPEG, WebP), las imágenes SVG escalan a cualquier tamaño sin perder calidad. Un icono de 24px y un logo del tamaño de una valla publicitaria pueden usar el mismo archivo SVG. Esto hace de SVG el formato estándar para iconos, logos, ilustraciones, gráficos y cualquier imagen que necesite renderizarse de forma nítida en múltiples tamaños. Esta guía cubre la estructura SVG, las técnicas de edición, las estrategias de optimización y el uso práctico en desarrollo web. Un archivo SVG es un documento de texto. Puedes abrirlo en cualquier editor de código y leerlo. El elemento raíz es <svg> con atributos para width, height y viewBox. El viewBox define el sistema de coordenadas: viewBox="0 0 100 100" significa que el área de dibujo se extiende desde (0,0) hasta (100,100). Dentro del elemento <svg>, encuentras elementos de forma como <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> y <path>. Cada elemento tiene atributos que definen su geometría, color de relleno, color de trazo, grosor de trazo y otras propiedades visuales. Entender esta estructura es esencial para editar SVGs de forma eficaz porque cada cambio visual que haces en un editor gráfico se mapea a un cambio en este marcado XML. El elemento <path> es el elemento SVG más potente y más complejo. Usa una cadena compacta de comandos en su atributo d para describir cualquier forma arbitraria. Los comandos son: M (mover a), L (línea a), H (línea horizontal), V (línea vertical), C (curva de Bézier cúbica), S (Bézier cúbica suave), Q (curva de Bézier cuadrática), T (Bézier cuadrática suave), A (arco elíptico) y Z (cerrar trazado). Las letras mayúsculas usan coordenadas absolutas. Las letras minúsculas usan coordenadas relativas. Un trazado típico se ve como d="M10 10 L90 10 L90 90 L10 90 Z\
Preguntas frecuentes
¿Mis datos SVG están seguros?
Sí, todo el procesamiento ocurre en tu navegador. No se suben datos a ningún servidor.
¿Puedo editar SVGs complejos?
Sí, puedes editar cualquier código SVG válido. La herramienta admite todos los elementos y atributos SVG estándar.
