Formas SVG – Conceptos básicos y código SVG, ejemplos

Las formas simples se utilizan continuamente en dibujos vectoriales: en logotipos, diagramas, etc. Para incluir la figura en la imagen, es necesario crear un elemento en un archivo SVG. Los atributos del elemento indicarán la posición, tamaño y otras características de la figura. Se puede aplicar una amplia gama de propiedades visuales a las formas: coloración, opacidad, redondeo de esquinas, trazo y más. Cómo insertar la figura en el documento SVG y editarlo usando la API Aspose.SVG se puede aprender en la sección Editar archivo SVG.

Rectángulo SVG

El elemento <rect> se aplica para crear un rectángulo SVG y variaciones de figuras rectangulares. Hay seis atributos que determinan la forma y posición del rectángulo en la pantalla:

x, y – las coordenadas x, y de la esquina superior izquierda del rectángulo

width, height – el ancho y alto del rectángulo

rx, ry – los radios x e y de las esquinas del rectángulo

Si los atributos x e y no están establecidos, la esquina superior izquierda del rectángulo se coloca en el punto (0,0). Si no se especifican los radios rx y ry, su valor predeterminado es 0. Puede rellenar el rectángulo con un color, hacer que el relleno sea transparente y aplicar estilo al trazo utilizando las propiedades del atributo style (consulte Rellenos y trazos en SVG).

El código SVG para generar el rectángulo SVG se parece a ( rectangle1.svg):

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
</svg>

El ejemplo de código muestra que crea un rectángulo SVG con el punto superior izquierdo en las coordenadas (60,100), el width="70" y el height="40". Tiene bordes redondeados y el stroke-width:5 Todas las unidades están en píxeles. A continuación se muestra un código de muestra más para crear un rectángulo sin bordes redondeados ( rectangle2.svg):

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <rect x="120" y="140" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

Se utilizan las siguientes propiedades del atributo style:

fill – define el color de relleno del rectángulo

fill-opacity – determina la transparencia del rectángulo

stroke-width – determina el ancho del trazo

stroke – determina el color del trazo

stroke-opacity – determina la transparencia del trazo

En las propiedades CSS fill y stroke, el color se puede configurar de varias maneras:

1. fill:blue: el color se toma de nombres de colores CSS. Todos los navegadores modernos admiten más de 140 nombres de colores.

2. fill:rgb(0,0,255): el color se escribe en el modelo de color RGB (valores rgb).

3. fill:#0000ff: el color se escribe en el modelo de color RGB (valores rgb hexadecimales).

RGB(red, green, blue) es un modelo de color aditivo que describe cómo se codifica cualquier color utilizando tres básicos. Los valores r, g y b son la intensidad (en el rango de 0 a 255), respectivamente, de los componentes rojo, verde y azul del color determinado. Es decir, un color azul brillante se puede definir como (0,0,255), rojo como (255,0,0), verde brillante – (0,255,0), negro – (0,0,0) y blanco – ( 255.255.255).

Círculo SVG

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. Estos son los atributos cx, cy y r, respectivamente.

Puede configurar las propiedades de trazo y relleno para un círculo SVG. En el siguiente ejemplo, el color del trazo es negro y el color de relleno es rojo. También puede establecer el ancho del trazo usando la propiedad de estilo stroke-width y rellenar la transparencia usando la propiedad fill-opacity. Aquí hay un ejemplo ( circle.svg):

<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
    <circle cx="250" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7" />
</svg>

En el ejemplo, la imagen del círculo no encaja completamente en la ventana gráfica. El ancho de la ventana gráfica es 300, es decir, en el eje x, se recorta a una distancia de 300 píxeles. Y para ver el círculo SVG completo, se necesita una ventana de 310 píxeles de ancho (cx+r=250+60=310). Para que el círculo sea completamente visible, debe aumentar el ancho de la ventana gráfica hasta 310.

Elipse SVG

Una elipse es una figura más general que un círculo. En el contexto de la creación de un elemento <elipse>, los valores de un semieje mayor rx, un semieje menor ry y las coordenadas de su punto de intersección (cx, cy) están indicados. Estas características son atributos:

rx, ry – los radios x e y de la elipse (semieje mayor y semieje menor)

cx, cy – las coordenadas x e y del centro de la elipse

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
    <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
</svg>

La segunda elipse SVG en el código tiene una transparencia del 50% y se mostrará sobre la primera. Una regla sobre el orden en que se muestran los elementos SVG es: los elementos posteriores en el código se muestran encima de los anteriores ( ellipse.svg).

Línea SVG

Para el dibujo de líneas SVG se utiliza la etiqueta <line>, la cual puede tener los siguientes atributos:

x1, y1 – las coordenadas x, y del punto de origen

x2, y2 – las coordenadas x, y del punto final

stroke-width – el ancho de línea

stroke – el color de la línea

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
    <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
    <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
</svg>

Aquí está la imagen SVG renderizada ( line.svg):

El ejemplo de código describe tres líneas SVG de diferentes colores y diferentes anchos. Las propiedades del atributo style stroke y stroke-width establecen el color y el grosor de la línea SVG.

Polilínea SVG

El elemento SVG <polyline> se utiliza para dibujar múltiples líneas rectas conectadas. Como regla general, las polilíneas son formas abiertas, el comienzo de la primera y el final de la última línea no coinciden. El atributo points especifica las coordenadas x, y de los puntos en los que se dobla la polilínea.

El primer grupo de dos números en los points define las coordenadas del inicio de la primera línea, el segundo grupo define el final de la primera línea y al mismo tiempo el inicio de la segunda línea, etc ( polyline.svg).

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
    <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
</svg>

En el primer ejemplo de polilínea SVG, hay 3 puntos que definen un triángulo. El espacio entre los puntos se rellenará con la propiedad fill. En el ejemplo, el color fill es gris: style="fill:grey". El color de fill predeterminado es negro. En el segundo ejemplo, siete puntos están conectados por la polilínea roja SVG con stroke-width:6 y fill:none.

Para obtener más información sobre las propiedades de los atributos de style, consulte el artículo Rellenos y trazos en SVG. La información completa está en la página W3C.

Polígono SVG

Un polígono es una forma geométrica plana formada por una polilínea cerrada. Si la polilínea no tiene puntos de autocruce, el polígono es simple. Por ejemplo, los triángulos y los cuadrados son polígonos simples, pero una estrella de cinco puntas no lo es.

El elemento <polygon> se utiliza para crear una forma que contiene al menos tres lados. El atributo points define las coordenadas (x, y) para cada esquina del polígono SVG.

Un ejemplo de una construcción de polígono SVG simple ( polygon.svg):

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <polygon points="160,10 350,140 210,350 50,199" style="fill:orange;stroke:purple;stroke-width:1" />
</svg>

Formas básicas SVG

Un documento SVG simple consta nada más que del elemento raíz <svg> y varias formas básicas que crean un gráfico juntas ( conclusion.svg).

<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
    <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
    <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke- width:5; fill-opacity:0.7; stroke-opacity:0.6" />
    <polygon points="160,10 350,140 210,350 50,199" style="fill:orange; stroke:purple; stroke-width:1; fill-opacity:1" />
    <rect x="120" y="150" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
    <circle cx="250" cy="100" r="60" stroke="black" stroke-width="3" fill="red" fill-opacity="0.7" />
    <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
    <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
    <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
    <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
    <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
</svg>

Esta sencilla imagen “Formas básicas SVG” contiene todas las figuras descritas anteriormente. Cerca se encuentra el famoso cuadro “Pink Accent” de Wassily Kandinsky. El conocimiento básico del marcado SVG le permite dibujar una imagen simple en un editor de texto, aunque las ideas más complejas no se hacen de esa manera.

En el artículo Constructores de elementos: crear y editar elementos SVG, aprenderá cómo crear y editar elementos SVG, incluidas formas SVG en C# utilizando la API Aspose.SVG Builder. También verá cómo SVG Builder es eficaz y cómo simplifica la programación SVG.

Si tiene una imagen que no es SVG, como un archivo JPG o PNG, puede convertir el archivo en un vector y guardarlo como SVG usando un Image Vectorizer gratuito en línea. La aplicación está basada en navegador y funciona en cualquier plataforma. ¡Consulta nuestro Vectorizador de imágenes para obtener todos los beneficios de los gráficos vectoriales!