Pues no es una práctica muy común pero sí que es posible si lo necesitas por algún motivo. Yo lo he tenido que solucionar en un caso en el que quería usar la etiqueta <img> para incluir el svg en un componente, pero quería tener el template del svg en el mismo archivo, para evitar lidiar con rutas de aplicación que podrían hacer que el componente no se comportase bien en todos los contextos.
Gracias a Base64 para la codificación de datos binarios puedes conseguir la imagen vectorial en forma de texto plano, pero que puedes usar en un atributo src de la imagen. Este enfoque permite integrar imágenes directamente en HTML o CSS, eliminando la necesidad de una solicitud HTTP adicional y la gestión de las rutas.
Para insertar imágenes en una página web utilizando el formato SVG codificado en Base64 simplemente tienes que codificarla en base 64 y luego la usas en la etiqueta IMG
Codificar un SVG en Base64
Primero, necesitas convertir tu archivo SVG a formato Base64. Puedes hacerlo usando herramientas diversas.
Existen muchas alternativas pero lo más sencillo es que busques en Google con el texto "svg to base64", Te saldrán algunos sitios que te hacen esa conversión inmediatamente.
Si lo deseas puedes convertirla tú mismo también. Existen librerías en diversos lenguajes que te permiten hacer ese trabajo. Por ejemplo en Python puedes usar "base64".
Insertar la imagen SVG codificada en HTML
Una vez que tienes la cadena Base64, puedes insertarla directamente en tu HTML usando la etiqueta <img>:
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0yNDAtNjQwaDM2MHYtODBxMC01MC0zNS04NXQtODUtMzVxLTUwIDAtODUgMzV0LTM1IDg1aC04MHEwLTgzIDU4LjUtMTQxLjVUNDgwLTkyMHE4MyAwIDE0MS41IDU4LjVUNjgwLTcyMHY4MGg0MHEzMyAwIDU2LjUgMjMuNVQ4MDAtNTYwdjQwMHEwIDMzLTIzLjUgNTYuNVQ3MjAtODBIMjQwcS0zMyAwLTU2LjUtMjMuNVQxNjAtMTYwdi00MDBxMC0zMyAyMy41LTU2LjVUMjQwLTY0MFptMCA0ODBoNDgwdi00MDBIMjQwdjQwMFptMjQwLTEyMHEzMyAwIDU2LjUtMjMuNVQ1NjAtMzYwcTAtMzMtMjMuNS01Ni41VDQ4MC00NDBxLTMzIDAtNTYuNSAyMy41VDQwMC0zNjBxMCAzMyAyMy41IDU2LjVUNDgwLTI4MFpNMjQwLTE2MHYtNDAwIDQwMFoiLz48L3N2Zz4=">
Eso crearía un simple icono de un candado abierto.
Toma en cuenta que el src comenzaría por data:image/svg+xml;base64,. Luego le pones lo que hayas conseguido al convertir el archivo svg a base64.
Uso en CSS
Otra opción que también puedes considerar es usar la imagen SVG codificada en Base64 dentro de tu CSS, por ejemplo como fondo:
body {
background-image: url('data:image/svg+xml;base64,PHN2Z...');
}
Ventajas y desventajas
Ventajas:
Realmente son las mismas que usar el svg inline.
- Reduce el número de solicitudes HTTP, lo que puede acelerar la carga de la página.
- Ideal para gráficos pequeños o iconos que son parte integral del diseño de la página.
Desventajas:
- Aumenta el tamaño del HTML/CSS debido a que la codificación Base64 usa aproximadamente 33% más espacio que los datos binarios.
- Aparte de más pesado, puede hacer que el código sea menos legible y más difícil de mantener.