Como utilizar imágenes SVG

facebook-svg gplus-svg twitter-svg

1. Imágenes SVG

Los documentos SVG pueden ser utilizados como imagen ( <img src= "apple.svg"... ) dentro de un documento HTML ya existente.

la manzana de apple

2. SVG como imágenes de fondo

También podemos utilizarlos como imagen de fondo: background-image: url(apple.svg);

div.bcg {
  background-image: url(apple.svg);
  background-repeat: no-repeat;
  background-position:center center;
}

3. SVG como objeto <object>

El elemento <object> es actualmente soportado en todos los navegadores, pero, por si acaso, tenemos la opción de utilizar una solución alternativa (fallback). En este caso utilizamos una imagen "apple.png" dentro de este elemento que aparecerá en pantalla solo en los navegadores que no soportan <object>.


  
  la manzana de apple

4. SVG dentro de un cuadro iframe

Exactamente como en el caso de <object>, el elemanto <iframe> es actualmente soportado en todos los navegadores, pero, por si acaso, tenemos la opción de utilizar una solución alternativa (fallback). En este caso utilizamos una imagen "apple.png" dentro de este elemento que aparecerá en pantalla solo en los navegadores que no soportan <iframe>.

5. SVG dentro de un elemento embed

También podemos incluir una imagen SVG dentro de un elemento <embed>:


  
  la manzana de apple

Vea todos estos ejemplos en codepen.io:

See the Pen SVG #1 by Gabi (@enxaneta) on CodePen.

SVG como data:uri

Otra manera de utilizar las imágenes SVG es convertirlas a data:uri.
1. Una propuesta que se puede ver por ahí es utilizar el código SVG no codificado ( unencoded ) así:

.data-uri-uncoded{ background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="106px" height="122px" viewBox="41 54 106 122"><g><path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" d="M143.099 . . . . /><svg>');
}

Abra esta imagen y mire la barra de direcciones.

De hecho esto funciona pero no en todos los navegadores. Hagámoslo bien. Para optimizar el código vamos a seguir estas reglas:

a. Lo ponemos todo entre comillas dobles ( " ) y ponemos los atributos entre comillas sencillas ( por ejemplo height = '122px' ). De esta manera no tendremos que escaparlas.

b. Ciframos los caracteres no-alfanuméricos, los así llamados caracteres reservados o caracteres inseguros ( unsafe in URLs characters ) pero no los espacios en blanco:

< se transforma en %3C
> se transforma en %3E

Por ejemplo <svg> vuelve a ser %3Csvg%3E

# se transforma en %23

Por ejemplo fill = "#abcdef" vuelve a ser fill = "%23abcdef"

el guión - se transforma en %2D

Por ejemplo stroke-width="2" vuelve a ser stroke%2Dwidth="2"

el símbolo matemático porciento % se transforma en %25

Por ejemplo width ='50%' vuelve a ser width ='50%25'

.data-uri-encoded{ 
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106px' height='122px' viewBox='41 54 106 122'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke%2Dwidth='2' d='M143.099 . . . . %3C/svg%3E";
}

Para una lista completa de los caracteres reservados y su codificación consulte Wikipedia: Código porciento
También puede leer este articulo en codepen.io: Optimizing SVGs in data URIs

Abra esta imagen en Firefox.

2. Otra propuesta sería convertir primero el código SVG a base64 y después utilizarlo.

<a href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0. . . ">Imagen SVG</a>
¿Como convertir el código SVG a base64?

En internet encontramos herramientas que codifican una cadena de texto en base64:
https://www.base64encode.org/
http://www.mobilefish.com/services/base64/base64.php
Y seguramente hay más.

También podemos utilizar PHP con este propósito: para ser más exactos lo podemos hacer utilizando la función base64_encode (PHP 4, PHP 5).

Veamos un ejemplo:


$svg_img ="<svg xmlns='http://www.w3.org/2000/svg'> . . . . </svg>";
$data_URI = base64_encode ( $svg_img );
echo "<a href='data:image/svg+xml;base64,".$data_URI."'>Abra esta imagen y mire la barra de direcciones</a>";
        

Abra esta imagen y mire la barra de direcciones.