Tutorial SVG – Aprende los fundamentos de SVG

SVG es un lenguaje basado en XML para crear gráficos vectoriales. Puedes escribir marcado SVG en un editor de texto, inspeccionarlo en un navegador y después procesarlo con las API de Aspose.SVG cuando necesites generar, editar, renderizar o convertir archivos SVG desde código.

Este tutorial explica los conceptos de SVG que aparecen en la mayoría de los flujos de trabajo reales: sistemas de coordenadas, viewBox, formas, paths, texto, colores, rellenos, trazos, gradientes, filtros, transformaciones y contenido incrustado. Úsalo como base antes de pasar a artículos centrados en API sobre edición, conversión, vectorización o generación de documentos SVG.

Coordenadas y diseño

• Sistemas de coordenadas y unidades SVG explica el lienzo SVG, el viewport, los sistemas de coordenadas de usuario y las unidades.
• SVG viewBox muestra cómo viewBox escala, recorta y reposiciona gráficos SVG.

Formas, paths y texto

• Formas SVG cubre rectángulos, círculos, elipses, líneas, polilíneas y polígonos.
• Datos de path SVG explica comandos de path para líneas, arcos, curvas Bézier y contornos personalizados.
• Texto SVG introduce los elementos <text>, <tspan> y <textPath> para mostrar y estilizar texto SVG.

Color y pintura

• Color SVG explica valores de color, fill, stroke, opacidad y uso del color en formas, paths y texto.
• Rellenos y trazos en SVG se centra en el modelo de pintura SVG, el ancho de trazo, los extremos, las uniones y los guiones.
• Color de fondo SVG muestra formas fiables de añadir o cambiar el fondo de un SVG.
• Gradientes SVG explica gradientes lineales y radiales, paradas de color, direcciones y reutilización mediante url(#id).

Efectos y transformaciones

• Transformaciones SVG cubre translate, scale, rotate, skew y funciones de transformación por matriz.
• Matriz de transformación SVG explica el modelo matricial detrás de las transformaciones SVG.
• Filtros SVG introduce desenfoque, sombra, iluminación y primitivas de filtro de color.

Contenido incrustado y práctica

• Contenido incrustado SVG muestra cómo SVG puede incluir imágenes raster, SVG anidados y HTML mediante contenido incrustado.
• Cómo dibujar un copo de nieve es un proyecto práctico de SVG que usa elementos reutilizables, rotación y animación.

Cómo usar este tutorial SVG

Empieza por los temas que coincidan con el problema que necesitas resolver:

1. Aprende primero coordenadas y viewBox si necesitas entender el diseño SVG, el escalado, el recorte o los gráficos responsivos.
2. Usa formas, paths y texto cuando necesites dibujar geometría SVG o crear texto legible en marcado.
3. Usa color, fill, stroke, gradientes y fondos cuando la estructura SVG sea correcta pero el estilo visual necesite trabajo.
4. Usa filtros y transformaciones cuando necesites desenfoque, sombras, iluminación, rotación, escalado, inclinación o posicionamiento mediante matrices.
5. Pasa a los artículos de API de Aspose.SVG cuando necesites generar, editar, convertir, renderizar o vectorizar archivos SVG desde código.

Los ejemplos de este tutorial usan marcado SVG directamente. La figura siguiente muestra el logotipo de Aspose renderizado como una imagen SVG. Incluso un fragmento SVG pequeño puede definir un icono, logotipo o dibujo sencillo reutilizable.

El fragmento siguiente es un ejemplo compacto de marcado SVG para el logotipo de Aspose. También puedes abrir el archivo fuente: aspose.svg.

<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
    <circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
</svg>

Aspose.SVG ofrece aplicaciones web SVG gratuitas para convertir archivos SVG o imágenes, fusionar archivos SVG, vectorizar imágenes, generar sprites SVG, codificar SVG como Base64 y vectorizar texto. Estas aplicaciones en línea funcionan en el navegador y no requieren instalar software adicional.