Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
¿Qué es un archivo SVG? – Pros, contras, código XML
Contents
[
Hide
Show
]¡Hablemos de los archivos SVG!
Scalable Vector Graphics (SVG) es un lenguaje XML para crear gráficos vectoriales bidimensionales y gráficos vectoriales/rasterizados mixtos. El documento SVG es un archivo de texto que describe imágenes como primitivas geométricas: líneas, curvas, formas, texto, etc. Los objetos vectoriales se construyen y almacenan como un conjunto de comandos, números, fórmulas, no en una cuadrícula de píxeles como en los mapas de bits. Esto significa que los SVG vectoriales se pueden cambiar significativamente de tamaño sin pérdida de calidad, lo que los hace ideales para íconos, logotipos, sprites SVG y más. Debido a que los SVG están escritos en código XML, almacenan información en texto sin formato en lugar de formas. Esto permite a los motores de búsqueda como Google leer gráficos SVG para sus palabras clave, lo que puede ayudar a un sitio web a ascender en el ranking de búsqueda.
Puede crear un archivo SVG utilizando editores gráficos como Inkscape, Adobe Illustrator, CorelDRAW y Figma, que ofrecen interfaces fáciles de usar para crear y editar archivos SVG visualmente, lo que los hace muy populares. Sin embargo, en este artículo, nos centraremos en cómo crear archivos SVG escribiendo código XML o convirtiendo imágenes rasterizadas a SVG.
Archivo SVG – Código XML
Un archivo SVG está escrito en el lenguaje de marcado XML. El código XML en el documento SVG define todas las formas, trazados, colores y texto que componen la imagen. El código SVG puede incrustarse directamente en HTML o guardarse en un archivo SVG e insertarse como cualquier otra imagen. Como todo el contenido de un archivo SVG es texto, puedes abrir uno en un editor de texto, leer y editar el código SVG. Puede utilizar un navegador web moderno como Chrome, Firefox o Edge para abrir y ver imágenes SVG en línea sin descargarlas. Puede identificar fácilmente un archivo SVG por su extensión .svg. Sin embargo, será útil conocer los conceptos básicos de SVG para comprender cómo se debe mostrar.
Elementos y atributos
Cada documento SVG se basa en elementos estructurales principales XML: una estructura en forma de árbol, etiquetas, elementos y atributos. Los elementos se aplican para dibujar, transformar, diseñar y colocar imágenes. Pueden contener atributos que definen sus propiedades, es decir, detalles sobre cómo se debe manejar o representar el elemento. El elemento escribe con ayuda una etiqueta inicial y una etiqueta final entre paréntesis angulares. El archivo SVG debe escribirse según la sintaxis XML y la especificación W3C SVG 2.0.
Veamos un ejemplo sencillo. Generamos una imagen SVG de cuatro círculos de diferentes tamaños y colores con un centro:
1<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2 <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
3 <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
4 <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
5 <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
6</svg>El elemento principal en el código SVG es el elemento <svg>, que define un fragmento de documento SVG.
- Los atributos
widthyheightdefinen la ventana gráfica SVG, es decir, el área visible donde se renderiza el contenido SVG. - El atributo
viewBoxdefine una ventana a través de la cual los elementos de su SVG son visibles. En este caso, el cuadro de visualización se extiende desde (0,0) hasta (300,300). Para obtener más información, visite el artículo Unidades y sistemas de coordenadas SVG. - El atributo
xmlnsen SVG significa espacio de nombres XML y representa los elementos y atributos estándar que se pueden usar en un documento SVG de acuerdo con la especificación de gráficos vectoriales escalables. Sin el atributoxmlns, es posible que el código SVG no se represente correctamente o no se represente en absoluto. - El elemento SVG
<circle>se utiliza para dibujar un círculo en la pantalla. Debes establecer la posición del centro y el radio del círculo SVG. En el ejemplo, pintamos los círculos con diferentes colores usando el atributofill. Para obtener más información, consulte el artículo Formas SVG.
Aquí está la imagen resultante ( circles.svg):
¡Haga clic en la imagen!
En la galería de imágenes, presentamos algunos de los SVG que se pueden crear fácilmente de forma manual escribiendo código XML. Haga clic en la imagen y la abrirá en el navegador. También puedes guardarlo y ver el código fuente. Descubrirás que una vez que domines los elementos básicos como formas, rutas, transformaciones y trabajo con color, podrás crear tus propias imágenes vectoriales.
 |  |  |  |
|---|---|---|---|
| Snowflake | Aspose Logo | Owl (Picasso style) | Tulips pattern |
 |  |  |  |
|---|---|---|---|
| Flower | Winter forest | Colorful Mosaic | Gradient shapes |
El capítulo Conceptos básicos del dibujo SVG es un tutorial que analiza cómo dibujar imágenes SVG e incluye artículos sobre unidades y sistemas de coordenadas SVG, formas básicas SVG, datos de ruta SVG, texto SVG, transformaciones SVG básicas, color SVG, rellenos. y trazos en SVG, contenido incrustado SVG y filtros y degradados SVG. Nuestro Tutorial de dibujo SVG explica reglas comunes y pasos estándar para crear SVG desde cero basándose en ejemplos simples. Esperamos que te ayude en tu trabajo o estudio.
Pros y contras del formato SVG
| Ventajas | Desventajas |
|---|---|
| Escalado infinito – Sin pérdida de calidad en ningún tamaño. | El tamaño del archivo aumenta con los detalles – Las ilustraciones complejas pueden aumentar de tamaño. |
| Pequeño para gráficos sencillos – El marcado basado en texto se comprime bien. | No apto para fotorrealismo – Gradientes de color naturales limitados. |
| Editable con cualquier editor de texto – Programabilidad completa. | Curva de aprendizaje más pronunciada – El código SVG puede resultar intimidante para principiantes. |
| Compresión integrada (SVGZ) – Entre un 50 % y un 80 % más pequeño que el SVG simple. | Navegadores antiguos – IE8 y versiones anteriores no son compatibles. |
| Accesibilidad – Los lectores de pantalla y los motores de búsqueda pueden leer el marcado. | Sin compatibilidad nativa con 3D – SVG se centra en gráficos 2D. |
| Rendimiento – Se puede integrar en HTML para reducir las solicitudes HTTP. | Rendimiento mejorado con miles de elementos – Gran impacto en el DOM. |
| Animación e interactividad – Control total de JavaScript y CSS. | |
| Estilo con CSS – Separa el diseño del marcado. | |
| Integración con DOM – Se puede manipular mediante las mismas API que HTML. | |
| Estándar abierto – Gratuito, mantenido por el W3C ( SVG 2.0). | |
| Fondo transparente por defecto – Ideal para superposiciones. |
A pesar de estas desventajas, los desarrolladores de navegadores modernos y el equipo de Aspose.SVG afirman que SVG es el futuro de los gráficos de diseño web.
Convertir imágenes rasterizadas en SVG: ¿está listo para probar?
Una de las formas de crear un documento SVG es convertir una imagen rasterizada en gráficos vectoriales. Aspose.SVG ofrece una herramienta en línea gratuita que puede utilizar para hacer esto. La aplicación Vectorizador de imágenes está diseñada para convertir imágenes de mapa de bits JPG, PNG, BMP, TIFF, ICO y GIF en gráficos vectoriales basados en figuras geométricas que consisten en curvas y líneas de Bézier. Después de la conversión, todos los elementos gráficos vectoriales se guardan en archivos SVG.
Historia de SVG
SVG fue desarrollado por el World Wide Web Consortium (W3C) y tiene una rica historia que se remonta a finales de los años 1990. En los primeros días de la Web, se desarrollaron rápidamente varios formatos y extensiones HTML. Claramente, sería útil un formato de gráficos vectoriales para la web. El Grupo de Trabajo SVG se creó en 1998 para proporcionar una forma estándar de representar gráficos vectoriales en la web y ofrecer una alternativa a los formatos de imágenes rasterizadas como JPEG y GIF.
En 1998, había seis aplicaciones competidoras en el campo de los gráficos vectoriales web en el W3C: Web Schematics, PGML, VML, Hyper Graphics Markup Language, WebCGM y DrawML que ayudaron a informar lo que eventualmente se convirtió en el formato SVG del W3C. Como resultado, el grupo de trabajo SVG estudió los requisitos generales para un nuevo formato vectorial y decidió no desarrollar ninguna de las aplicaciones existentes sino desarrollar un nuevo lenguaje, teniendo en cuenta las lecciones aprendidas de todo el trabajo anterior. Hubo un acuerdo general entre los desarrolladores sobre el tipo de herramientas de gráficos vectoriales necesarias (curvas Bézier, máscaras, composición) y el grupo de trabajo de SVG se centró en estos puntos en común en lugar de en los conflictos de sintaxis. Básicamente, SVG fue diseñado desde cero, teniendo en cuenta todas las influencias anteriores.
La primera versión de SVG, conocida como SVG 1.0, se publicó como recomendación del W3C el 4 de septiembre de 2001. Esta versión sentó las bases para los gráficos vectoriales en la web e introdujo formas, texto, rutas y transformaciones básicas. El desarrollo de SVG 2.0 comenzó con el objetivo de perfeccionar y ampliar la especificación SVG. SVG 2.0 tiene como objetivo proporcionar nuevas funciones y una mejor integración con otros estándares web. El último borrador SVG 2.0 se publicó el 8 de marzo de 2023.
SVG tardó algún tiempo en ganar popularidad. La compatibilidad con SVG fue relativamente pequeña hasta 2017, cuando la gente empezó a ver los beneficios de usar SVG en los navegadores web modernos.
Casos de uso típicos
- Iconos y logotipos escalables
- Ilustraciones, diagramas, infografías, mapas
- Componentes de interfaz de usuario y widgets interactivos
- Juegos web sencillos y visualizaciones de datos
- Ilustraciones vectoriales listas para imprimir (poligrafía)
Errores comunes y soluciones
| Problema | Causa | Solución |
|---|---|---|
| El SVG aparece en blanco en el navegador | Atributo xmlns faltante o incorrecto | Asegúrese de que la etiqueta raíz <svg> incluya xmlns="http://www.w3.org/2000/svg" |
| El texto no se puede seleccionar ni buscar | Texto convertido en trazados o contornos | Mantenga los elementos <text> en el marcado; evite convertir texto en formas durante la exportación |
| El tamaño del archivo es inesperadamente grande | Trazados demasiado detallados o grupos innecesarios | Simplifique los trazados con herramientas como SVGO, elimine las capas ocultas y minimice el SVG |
| La animación no se ejecuta | Faltan etiquetas script o style en un SVG en línea | Al insertar, colocar <style> y <script> dentro del elemento <svg> o hacer referencia a archivos externos |
| El SVG no responde | Se corrigieron los atributos width/height sin viewBox | Eliminar dimensiones explícitas y usar viewBox con CSS width: 100% |
| Las herramientas de accesibilidad no pueden leer el gráfico | No hay elementos <title> ni <desc> | Añadir <title> para una descripción breve y <desc> para información detallada |
Conclusión
SVG es un formato esencial en el desarrollo web moderno, ya que ofrece escalabilidad, flexibilidad, tamaños de archivo pequeños y programabilidad. A diferencia de las imágenes rasterizadas, los archivos SVG son XML basados en texto, lo que los hace editables, accesibles y con capacidad de búsqueda SEO. La capacidad de diseñar y animar SVG con CSS y JavaScript mejora aún más su usabilidad.
A pesar de algunos inconvenientes, como la falta de renderizado fotorrealista y la compatibilidad limitada con 3D, SVG sigue siendo un estándar ampliamente compatible para gráficos vectoriales. Si bien los SVG tienen algunas limitaciones, como la complejidad para imágenes muy detalladas y la compatibilidad limitada con navegadores para versiones anteriores, sus beneficios superan con creces estos inconvenientes. Desde íconos y logotipos hasta elementos web interactivos y poligrafía, los archivos SVG ofrecen una forma profesional y eficiente de trabajar con gráficos vectoriales.
Dominar SVG abre un mundo de posibilidades creativas, lo que le permite crear gráficos livianos, escalables y altamente receptivos para experiencias digitales modernas.
El objetivo del equipo de Aspose.SVG es ayudarle a descubrir lo suficiente sobre la tecnología SVG para que pueda producir lo que necesita.
Próximos pasos y recursos relacionados
- Dibujo SVG: Tutorial básico – Aprenda sobre sistemas de coordenadas, formas SVG, rutas y transformaciones.
- Filtros y degradados SVG: Código SVG y ejemplos – Profundice en los filtros de desenfoque, sombra y matriz de color.
- Cómo trabajar con la API Aspose.SVG para .NET – C# – Guía para la manipulación programática de SVG con la biblioteca Aspose.SVG for .NET.
