Existen dos formas de usar imágenes con formato SVG en un documento HTML5: podemos embeber el código para generar la imagen en el documento HTML, o bien crear un archivo externo y enlazarlo con el documento HTML (tal como hacemos con los documentos CSS y los archivos de JavaScript).
Empezaremos por ver cómo crear una imagen simple embebida dentro del propio documento de HTML. Tal como lo hacemos cuando trabajamos con el elemento <canvas>, vamos a usar un elemento del HTML que actuará como lienzo en el cual se creará la imagen SVG. Dicho elemento es la etiqueta <svg>, la cual posee apertura y cierre tal como se muestra en el ejemplo a continuación:
<svg> Aquí irá el contenido de la imagen SVG </svg>
En la etiqueta <svg> siempre debe estar establecido el ancho y el alto del lienzo mediante los atributos width y height, como se muestra en el siguiente ejemplo:
<svg width=”100″ height=”100″> Aquí irá el contenido de la imagen SVG </svg>
En caso de tener elementos dentro de la etiqueta que excedan dicho tamaño, estos se verán cortados. Lo que significa que este tamaño de lienzo actúa como una máscara de los elementos que contiene en su interior.
Ahora que ya sabemos los atributos básicos de la etiqueta <svg>, veremos cómo incluir contenido dentro de él. Para ello vamos a crear un ejemplo con el código completo:
<!DOCTYPE html>
<html>
<body>
<h1>Mi primer archivo SVG</h1>
<svg width=”300″ height=”300″>
<circle cx=”90″ cy=”90″ r=”80″ stroke=”grey” stroke-width=”6″ fill=”orange” />
¡Qué pena, tu navegador no soporta la etiqueta svg!
</svg>
</body>
</html>
Podemos ver que la etiqueta <svg> es el contendor de las etiquetas que van a crear el dibujo. En este caso la etiqueta <circle> nos permite dibujar una figura circular dentro del lienzo del <svg>:
<circle cx=”90″ cy=”90″ r=”80″ stroke=”grey” stroke-width=”6″ fill=”orange” />
Como podemos ver, la etiqueta <circle> posee una serie de atributos que permiten definir sus características visuales a saber:
* cx: define la coordenada del eje X del centro del círculo.
* cy: define la coordenada del eje Y del centro del círculo.
* r: define el radio del círculo.
* stroke: define el color del contorno del círculo.
* stroke-width: define el grosor del contorno del círculo.
* fill: define el color de relleno del círculo.
