• +
    • Siguenos en feedly

Pídenos información

Nombre:*

E-mail:*

* Campos obligatorios

Teléfono:

¿En qué te podemos ayudar?

SVG en HTML: Crear dibujos vectoriales en la web

svg en html dibujos vectoriales valencia
SVG es un formato de gráficos vectoriales estandarizado empleado en programas de edición de gráficos. Con HTML5 es posible insertar etiquetas SVG en HTML, lo que permite crear dibujos vectoriales directamente en la web: círculos, líneas, arcos o cualquier otra forma que se nos ocurra.

Como puedes ver existen muchas posibilidades a la hora de dibujar. En este artículo explicaremos cómo crear las figuras más elementales: líneas, círculos y polígonos. Más adelante explicaremos otras figuras, formas de agrupar elementos y cómo hacerlo responsive.

SVG en HTML: Reglas generales

Para comenzar a dibujar utilizaremos la etiqueta <svg> </svg>. El primer requisito a la hora de dibujar es que debemos darle dimensiones a la etiqueta (width y height). Esta etiqueta permite, al igual que sucede con las imágenes, asignarle estilos en línea sin que se produzcan errores de validación del código.

El modo de introducir cada figura es escribiendo sus etiquetas con sus propiedades dentro de la etiqueta svg. Dependiendo de cada figura definiremos sus coordenadas de un modo u otro.

<svg width="200" height="200">
  <line x1="4" y1="4" x2="90%" y2="94%" stroke="#aaaaaa" />
</svg>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" fill="#F1EDA9" />
</svg>

Líneas SVG

Las líneas se definen con la etiqueta <line />. Para definirla tenemos que introducir las coordenadas del punto inicial y final(x1 y1 x2 y2), en pixeles o porcentaje. Si es en pixeles no hay que añadir “px” al valor. Además tenemos que asignarle un color (“stroke”) para que la muestre:

<svg width="200" height="200">
  <line x1="4" y1="4" x2="90%" y2="94%" stroke="#aaaaaa" />
</svg>

Podemos añadir más propiedades como el grosor de línea, el tipo de línea o la forma de los extremos:
– Stroke-width: Grosor de la línea
– Stroke-dasharray: Líneas discontínuas. Requiere 2 valores, para la longitud de cada raya y la separación en ellas (ejemplo: “5,5”).
– Stroke-linecap: forma de los extremos (butt=recto, round=redondo, square=cuadrado)

Si, por ejemplo, queremos hacer una línea de puntos, podríamos hacerlo de este modo:

<svg width="300px" height="40px">
    <line x1="40" x2="260" y1="20" y2="20" stroke="#5184AF" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>

Círculos SVG

Los círculos se definen con la etiqueta <circle />. En este caso debemos introducir el centro del círculo y su radio (cx cy r). Podemos personalizar el contorno con los mismos parámetros “stroke” empleados para la línea. Para el relleno utilizaremos la propiedad “fill” y para cambiar su opacidad “fill-opacity”, con valores entre 0 y 1.

<svg width="100" height="100">
  <line x1="0" x2="100" y1="00" y2="100" stroke="green" stroke-width="3" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="#F1EDA9" fill-opacity="0.8" stroke-dasharray="10,11" />
</svg>

Polígonos SVG

Los polígonos se definen con la etiqueta <poligon />. Los puntos del polígono en este caso se introducen todos con la propiedad “points” (ejemplo: points=”0,0 0,1 1,1 1,0”, que sería un cuadrado). Las propiedades para el contorno y el relleno son las mismas que ya hemos explicado, añadiendo una nueva propiedad para el relleno, “fill-rule”. Con esta propiedad podemos jugar con lo que se rellena, aceptando los valores “nonzero” y “evenodd”.

<svg width="200" height="210">
  <polygon points="100,10 190,78 160,198 40,198  10,78 "
  style="fill:#D7DAD7;stroke:purple;stroke-width:5" />
</svg>
<svg width="200" height="210">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:#D7DAD7;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg width="200" height="210">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:#D7DAD7;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Como veis, es bastante sencillo dibujar directamente en la web. Más adelante explicaremos otros modos algo más complejo de crear formas y cómo hacer que se adapten al tamaño de la ventana.

¿Quieres 3 plantillas gratuitas?

tres plantillas gratuitas
  • Calendario editorial RRSS.
  • Informe resultados RRSS.
  • Check list SEO Moz.
* Campo obligatorio

Estés donde estés, si necesitas un sitio web, tienda online, campañas de e-mailing, gestión de tus redes sociales, video marketing o diseño gráfico, no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.

Share on FacebookTweet about this on TwitterShare on Google+Buffer this pageShare on LinkedIn

Deja tu comentario

*

¿Quieres nuestro ebook?

ebook analytics gratuito

Configuración Extra de Google Analytics: Sácale el máximo partido a tu cuenta


* Campo obligatorio

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. En ningún caso serán cedidas a terceros. Si continúa navegando está dando su consentimiento para la aceptación de las cookies y la aceptación de nuestra política de cookies.

CERRAR