Gráficos SVG para Web

Gráficos SVG para Web

Las imágenes con formato SVG, son gráficos vectoriales, se formatean a partir de un código fuente XML y se comportan como si fuese texto. Repasemos entonces, como debemos insertar estos gráficos dentro de una página y como interactuar.

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.

Un archivo de un gráfico SVG, esta escrito en XML, dividido en capas, llamadas “path” y cada una puede tener su propia clase CSS, puedes ver el ejemplo debajo.

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

Con una función php carga en linea el código del archivo svg.

Este otro caso es lo mismo que el anterior pero insertamos el archivo con una función PHP.

PHP


<?php echo file_get_contents("grafico.svg"); ?>

Código jQuery
SVG en Web

Carga el gráfico desde la etiqueta img y el script le injecta el archivo SVG.

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" />

Este script para jQuery, se encarga de inyectar el código svg. Recuerda incluir la librería de jQuery.

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.

CSS


a svg .cls-s:hover { fill: #d1e5f5; }
a svg .cls-v:hover { fill: #f8d7da; }
a svg .cls-g:hover { fill: #d4edda; }

Descargate en el botón, todos los ejemplos.

Compartir