INICIO Nosotros Crea animaciones online

Crea animaciones con figuras simples svg

Tutorial de figuras simples en un gráfico vectorial SVG

Un gráfico svg se compone de varias secciones muy delimitadas.

Hoy intentare explicar las figuras simples que nos encontramos dentro del código del svg.

Svg es un código en formato xml ,esto es, son código con propiedades que dan forma a las figuras.

Al ser en formato texto da un potencial tremendo al poder cambiar dicho contenido , y generar figuras “vivas ” modificables por programación

Hoy vamos a ver las etiquetas simples que nos encontramos dentro del texto de los gráficos vectoriales

Las etiquetas son la parte más pequeña y más importante de nuestro gráfico vectorial svg, son las que le dan la verdadera forma de la figura

En la etiqueta podemos encontrar:

  • El nombre de la figura en cuestión (polyline, rect, circle, polygon ,text ,circle ,ellipse, line y path)
  • La situación donde es generada el ancho el alto o el radio de la figura svg
  • Varias propiedades que se le dan a las alas figuras simples como son:
    • Fill (color)
    • Stroke (color del contorno )
    • stroke-width (Grosor del contorno)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 170 165">		

<g>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" fill="#58075b" stroke="black" stroke-width="6" />
<rect width="300" height="100" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" stroke-width="3" />
<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="3" />
<path d="M 10,70 L 30,40 L 70,100 L 130,10" fill="blue" stroke="RoyalBlue" stroke-width="5" />
<polygon points="200,10 250,190 160,210" fill="#f933ff" stroke="purple" stroke-width="4" />
<circle cx="200" cy="200" r="90" fill="yellow" stroke="green" stroke-width="4" />
<ellipse cx="300" cy="300" rx="100" ry="200" fill="#21b272"; stroke="purple"; stroke-width="2" />
<line x1="550" y1="0" x2="550" y2="600" fill="#33acff" stroke="#917292" stroke-width="6" />
<text x="30" y="105" fill="red" stroke="#917292" stroke-width="6" >¡¡¡¡¡HOLA MUNNNNDOOOOO!!!!!</text>
<g>
</svg>

Una o varias de estas etiquetas de figuras simples pueden estar anidadas con la etiqueta”<g> </g> ” que las administra como si fuera un grupo, pudiendo generar propiedades grupales

Nos queda la etiqueta que define el svg en la cabecera “<svg> y <svg>” dentro de esa etiqueta que engloba a todas las demás podemos encontrar propiedades que afectan a todo el gráfico, poco a poco iremos estudiando cada una de todas estas propiedades

código de figuras simples en un grafico svg link al codigo