Agregar SVG a sus páginas

En esta sección, veremos las diferentes formas en las que puede agregar gráficos vectoriales SVG a sus páginas web.

La forma rápida: <img>

Para incrustar un SVG a través de un elemento <img>, solo necesita hacer referencia a él en el atributo src como es de esperar. Necesitará un atributo de altura o ancho (o ambos si su SVG no tiene una relación de aspecto inherente). Si aún no lo ha hecho, lea Imágenes en HTML.

Pros

• Sintaxis de imagen rápida y familiar con equivalente de texto integrado disponible en el atributo alt.
• Puede convertir la imagen en un hipervínculo fácilmente anidando el <img> dentro de un elemento <a>.
• El navegador puede almacenar en caché el archivo SVG, lo que da como resultado tiempos de carga más rápidos para cualquier página que utilice la imagen cargada en el futuro.

Cons

• No puede manipular la imagen con JavaScript.
• Si desea controlar el contenido SVG con CSS, debe incluir estilos CSS en línea en su código SVG. (Las hojas de estilo externas invocadas desde el archivo SVG no tienen efecto).
• No puede cambiar el estilo de la imagen con pseudoclases CSS (como :focus).