Corta Introducción a SVG. Mostrar Figuras en HTML sin librerías y CiberSeguridad

Hay pocas menciones a SVG asique vengo a hacer una corta intro para resaltar sus cualidades y presentar esta herramienta a quien no la conozca.
SVG Scalable Vector Graphics es un deribado de XML que podemos incluir directamente en nuestro documento HTML entre las etiquetas <svg> </svg>

SVG nos permite mostrar figuras gráficamente. Lo mejor es que veas un ejemplo para que compruebes como funciona:

Código

<!DOCTYPE html>
<svg>
<circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40>
</circle>
</svg>

Copia el código anterior y guárdalo como nombredetuarchivo.html ahora ábrelo en el navegador y podrás ver el restultado.

También podemos moverlo por la pantalla, aplicarle atributos CSS, también seleccionar los colores de relleno y borde con el nombre del color en inglés:

Código

<svg width="100" height="100">
<circle cx="50" cy="50"r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>

Se pueden hacer todo tipo de figuras y dibujos, ya sea para hacer banners, o elementos interactivos par tu web, ya que puede usar handlers en javascript para hacer efectos, cambiar de figura y más cosas con eventos.

En el siguiente link os dejo varias etiquetas con sus links para SVG
https://developer.mozilla.org/es/docs/Web/SVG/Element

Si lo que te interesa son temas de ciberseguridad...
SVG ha sido y es usado para fabricar desde Keylogger que puede correr bajo extensiones como noscript para por ejemplo desanonimizar usuarios de Tor hasta escondes payloads en javascript para enviar por correo. Ya que muchos servidores bannean el "truquito" del attachment de la doble extensión para mandar documentos con javascript. Hay mucho malware que se ha "desechado" y que puede volver a ser útil con cambios realmente pequeños.

Una herramienta muy útil y sencilla de utilizar.