Dibujo SVG – Tutorial básico
SVG es un lenguaje XML que se utiliza para dibujar gráficos vectoriales. Si está familiarizado con HTML y XML básicos, puede crear SVG fácilmente en cualquier editor de texto. Esperamos que nuestro Tutorial de dibujo SVG te ayude en tu trabajo o estudio. Intentamos explicar reglas comunes y pasos estándar para crear SVG desde cero basándonos en ejemplos simples.
Este capítulo tiene como objetivo explicar cómo dibujar imágenes SVG. Esto 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.
- Unidades y sistemas de coordenadas SVG En este artículo, encontrará la descripción del espacio de trabajo de SVG que está definido por los valores de los atributos viewport y viewBox.
- Formas SVG En este artículo, puede aprender cómo crear diferentes formas simples y aplicarles algunas propiedades de estilo.
- Datos de ruta SVG Este artículo muestra cómo se pueden usar las rutas para dibujar varios contornos o formas combinando líneas, arcos y curvas de Bézier. El grupo de comandos para crear rutas SVG se describe aquí.
- Texto SVG Este artículo presenta los elementos de contenido de texto y revisa algunos atributos comunes que ayudan a mostrar, formatear y diseñar el texto en una imagen SVG.
- Transformaciones SVG básicas Descubrirá cómo aplicar las funciones de transformación para la rotación, escala, movimiento y sesgo de objetos gráficos a través del atributo de transformación SVG y considerará ejemplos de código para transformaciones SVG.
- Matriz de transformación SVG Aprenda a utilizar una matriz de transformación para rotar, escalar, traducir y sesgar gráficos SVG y considere ejemplos de código para transformaciones SVG.
- Rellenos y trazos en SVG En este artículo, describimos varias propiedades que le permiten establecer diferentes aspectos de relleno y trazo, incluido el color, la opacidad, el grosor, el uso de guiones, etc.
- Color SVG Este artículo analiza en profundidad las diferentes formas en que se pueden colorear el texto y las formas SVG. Encontrará una descripción general de cómo se define el color, incluidas las diversas formas en que puede controlar la transparencia del contenido SVG.
- Color de fondo SVG En este artículo, analizaremos qué fondo hay en SVG. También encontrará ejemplos de códigos SVG y una guía completa sobre cómo configurar o cambiar un color de fondo.
- Contenido incrustado SVG es contenido que se importa al documento desde otro recurso. Verá cómo incluir y representar elementos HTML y de mapa de bits dentro de un objeto SVG.
- Filtros SVG y degradados Se revisan las primitivas de filtro que producen efectos de desenfoque, color y iluminación. El capítulo demuestra cómo los degradados lineales o radiales pueden decorar cualquier línea, forma o texto en gráficos SVG.
En los artículos, crearemos imágenes vectoriales SVG usando código XML. La figura ilustra el logotipo de Aspose – imagen SVG. Sólo unas pocas líneas de código y podrás crear un ícono, logotipo o cualquier imagen simple.
A continuación se muestra un ejemplo de código SVG para el logotipo de Aspose ( aspose.svg):
1<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
3 <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)"/>
4 <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)"/>
5 <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)"/>
6 <circle cx="34.5" cy="73.5" r="40" fill="white" fill-opacity="0.3" />
7</svg>Aspose.SVG ofrece Aplicaciones web gratuitas SVG para convertir archivos SVG o de imágenes, fusionar archivos SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a base64 y vectorizar texto. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con SVG!