Partiendo de que todos sabemos las ventajas que tiene trabajar con gráficos, a diferencia de imágenes, en cuanto a diseño Web. Debemos estudiar un poco, cual es la mejor forma de incluir el archivo del gráfico SVG en el código HTML.
Todas las opciones para insertar el gráfico son muy operativas. Según el caso, se diferencian unas de otras en que pueda ser interactiva o no y en que código fuente se instala.
Opciones para insertar Gráficos SVG
Básica
Me refiero a básica como una forma de instalar el gráfico en la página, solo para visualizarla pero no es interactiva, por lo tanto no responde a eventos de ratón.
La manera mas sencilla de incluir el archivo SVG, es por la típica etiqueta “img” y como si de un archivo jpg se tratase, incluiremos la ruta del gráfico en el atributo “src”. El ejemplo del código, que en este caso carece de comportamientos lo tienes debajo.
Etiqueta img
<img class="img-fluid" src="grafico.svg" />
La otra opción igual de sencilla y sin ser interactiva, es añadirle un “background-image” a una capa o cualquier otro elemento, y tendremos que darle un ancho y un alto. Debajo puedes ver un ejemplo.
Div background image
<div style="background-image:url('grafico.svg'); width:138px; height:50px;"></div>
Interactiva
Defino interactiva como insertar el gráfico y dotarle de los mismos comportamientos que si de un texto se tratase, por lo tanto si pasamos el ratón por encima puede cambiar su color incluso independiente a cada capa que lo forman. También admite eventos de programación.
Para insertar nuestro gráfico y conseguir toda esta funcionalidad, explicamos tres formas en diferentes lenguajes y en el último ejemplo se varía el comportamiento, según los estilos aplicados, pero son aplicables para todos.
Código HTML
Insertar el código de la etiqueta svg directamente en la página.
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 50">
<defs>
<style>
.cls-s,
.cls-v,
.cls-g {
fill:#dddddd;
}
</style>
</defs>
<path class="cls-s" d="M14.87,10.75a4.16,4.16,0,0,0-1.57,3.39,3.82,3.82,0,0,0,1.91,3.35q1.91,1.25,8.84,2.94t10.76,5.08q3.83,3.39,3.83,9.89A13,13,0,0,1,33.73,46q-4.91,4-12.92,4Q9.26,50,0,41.49l6.48-7.88Q14.34,40.46,21,40.46a7.67,7.67,0,0,0,4.7-1.28,4.1,4.1,0,0,0,1.71-3.46,4,4,0,0,0-1.81-3.46Q23.81,31,18.45,29.67,10,27.66,6,24.45T2.09,14.35q0-6.88,5-10.62A20.13,20.13,0,0,1,19.5,0a30.07,30.07,0,0,1,9.75,1.66,26.17,26.17,0,0,1,8.49,4.7l-5.5,7.88A21.52,21.52,0,0,0,19.15,9.47,6.58,6.58,0,0,0,14.87,10.75Z" transform="translate(0 0)"/>
<path class="cls-v" d="M67,31.63L79.49,0.75H91.3L71.66,49.25H62.44L42.8,0.75H54.61Z" transform="translate(0 0)"/>
<path class="cls-g" d="M127.07,24.83H138V42q-7.24,8-20.05,8a24.85,24.85,0,0,1-18-7.05,23.76,23.76,0,0,1-7.27-17.81,24,24,0,0,1,7.41-17.95A24.77,24.77,0,0,1,118,0a26.58,26.58,0,0,1,18.21,6.85l-5.64,8.09a21.58,21.58,0,0,0-6-3.91,16.28,16.28,0,0,0-6-1.07,14.31,14.31,0,0,0-10.44,4.18,14.79,14.79,0,0,0-4.25,11q0,6.85,4.07,11a13.2,13.2,0,0,0,9.71,4.11,18.76,18.76,0,0,0,9.4-2.14V24.83Z" transform="translate(0 0)"/>
</svg>
Aquí pudes ver todas las posibilidades de estilo.
CSS
a:hover svg .cls-s { fill: #d1e5f5; }
a:hover svg .cls-v { fill: #f8d7da; }
a:hover svg .cls-g { fill: #d4edda; }
Código php
Este otro caso es lo mismo que el anterior pero insertamos el archivo con una función PHP.
PHP
<?php include "grafico.svg"; ?>
Código jQuery
Volviendo a la etiqueta img, debemos de añadirle la clase que utilizamos para lanzarle el script.
HTML
<img class="img-svg" src="grafico.svg" />
jQuery
var $s = jQuery.noConflict();
$s(function() {
$s('img.img-svg').each(function(){
var $img = $s(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$s.get(imgURL, function(data) {
var $svg = $s(data).find('svg');
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
$svg = $svg.removeAttr('xmlns:a');
$img.replaceWith($svg);
}, 'xml');
});
});
Con estos nuevos estilos de damos otro comportamiento. Estos estilos también se podrían aplicar al ejemplo anterior.
CSS
a svg .cls-s:hover { fill: #d1e5f5; }
a svg .cls-v:hover { fill: #f8d7da; }
a svg .cls-g:hover { fill: #d4edda; }
Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias