Etiqueta SVG: Gráficos vectoriales y escalables

Vamos a repasar en este post la etiqueta SVG, esta etiqueta permite insertar gráficos vectoriales y escalables dentro de una página web.

Quizás os sirva de utilidad este post en caso de usar WordPress en vuestra web:

• Habilitar y subir imágenes SVG en WordPress

Otras etiquetas multimedia interesantes son:

• audio para reproducir audios.
• video para reproducir vídeos.

¿Qué nos permite hacer la etiqueta SVG?

Tal y como he comentado en las líneas superiores nos permite insertar imágenes vectoriales y escalables, esto quiere decir que dichas imágenes independientemente de las dimesiones que tengan nunca perderían calidad (Borrosas, pixeladas…) ni se deformarían.

Las imágenes con las que trabajamos habitualmente (jpg, gif, png…) tienen un tamaño óptimo en el cual se visualizan correctamente, cualquier variación a unas dimensiones superiores o inferiores crearía un efecto de pixelación.

Imagen PNG

De ahí que hoy en día se opte por realizar los gráficos en SVG además de por su compatibilidad con los dispositivos móviles.

Gráfico SVG vía Freepik

Los gráficos SVG están compuestos por coordenadas de puntos, por eso nunca pierden calidad al aumentar o disminuir sus dimensiones.

SVG y HTML5

Antes de la llegada del HTML5 no todos los navegadores soportaban los gráficos SVG (Por ejemplo las versiones inferiores a Explorer 9), de ahí que muchos diseñadores/desarrolladores optaran por usar la tecnología flash.

En la especificación oficial de HTML5 se reconoce la etiqueta SVG como estándar, esto obliga a todos los navegadores a soportar dicha etiqueta.

Sintaxis y atributos de la etiqueta SVG

Veamos la sintaxis de esta etiqueta:

La sintaxis básica es sencilla, tan solo debemos poner la etiqueta y definir un tamaño inicial. En dicha etiqueta podemos poner los atributos y etiquetas que necesitemos para realizar nuestro gráfico vectorial.

Listado de etiquetas compatibles:

• Animación: animate, animateColor, animateMotion, animateTransform y set.
• Descriptivas: desc, metadata y title.
• Formas: circle, ellipse, line, path, polygon, polyline y rect.
• Estructura: defs, g, svg, symbol y use.
• Degradados: linearGradient, radialGradient.
• Otras: a, altGlyphDef, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, text y view.

Listado de atributos compatibles:

• Condicionales: requiredFeatures, requiredExtensions y systemLanguage.
• Core: id, xml:base, xml:lang y xml:space.
• Eventos: onunload, onabort, onerror, onresize, onscroll y onzoom.
• Eventos gráficos: onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout y onload.
• Presentación: alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, unicode-bidi, visibility, word-spacing y writing-mode.
• Otros: class, style, externalResourcesRequired, x, y, width, height, viewBox, preserveAspectRatio, zoomAndPan, version, baseProfile, contentScriptType, contentStyleType, x, y, width, height, version y baseProfile.

Ejemplos de la etiqueta SVG para hacer gráficos vectoriales

Comenzamos con un sencillo ejemplo para crear un rectángulo SVG:

Tal y como podéis ver en el código superior hemos usado la etiqueta rect para crear un rectangulo dentro del gráfico SVG.

Con el estilo ‘fill’ le estamos asignando el color al rectangulo, en ete caso le hemos dado un color gris. Si no se define un color por defecto el rectángulo será negro.

Ahora veamos cómo realizar un círculo SVG:

En el código superior hemos usado la etiqueta circle para crear un círculo dentro del SVG. Los estilos también pueden ponerse como atributos, con fill para que el circulo sea azul, con stroke y stroke-width definimos el borde y su color, con cx y cy definimos la posición central del círculo dentro del gráfico y para terminar con r definimos el radio.

Ahora veamos cómo realizar un óvalo SVG:

Código similar al anterior, con la diferencia que en este caso debemos definir un radio horizontal con rx y un radio vertical con ry.

Nuevo ejemplo para trazar líneas SVG:

En el código superior he trazado 4 líneas dentro de un SVG cuadrado 500×500. Tal y como podéis ver cada línea posee una posición de inicio de la línea (x1 e y1) y una coordenada final de la línea (x2 e y2).

Nuevo ejemplo dibujar un polígono SVG:

En este nuevo caso hemos dibujado un triángulo, solo hemos tenido que meter las coordenadas de los 3 puntos para que se unan entre si y salga dicho triángulo. El último punto se une con el primero.

Nuevo ejemplo dibujar una polilínea SVG:

En este ejemplo hemos dibujado 6 puntos unidos entre si, con fill:none estamos diciendo que no lleve color de relleno.

Terminamos escribiendo un texto SVG:

Tal y como podéis ver con la etiqueta text podemos escribir texto. Con los atributos x e y decidimos dóden comienza.