SVG con estilo

facebook-svg gplus-svg twitter-svg

Para dar estilo a  los trazados en SVG podemos utilizar atributos de presentación, por ejemplo: stroke="#000" fill="#6ab150" height="100" width="100"...

<rect x="10" y="10" stroke="#000" fill="#6ab150" height="100" width="100" /><rect>

También podemos utilizar CSS con este propósito:

<rect x="10" y="120" />

rect{
  stroke:#000;
  fill: #6ab150;
  height:100px;
  width :100px;
}

Alternativamente podemos utilizar estilos en línea ( inline ): style="stroke:#000; . . . ".

<rect x="10" y="120" style="stroke:#000; fill: #6ab150; height:100px; width :100px;" />

Como ya se sabe los estilos en línea sobreescriben los estilos situados en un en un elemento <style>, que sobreescriben los estilos situados en un documento.css, que a su turno sobreescriben los atributos de presentación.

Visto así parece que los atributos de presentación no tienen importancia alguna. ¡Error! Los atributos de presentación son muy importantes si por alguna razón el CSS está desactivado o falla.

Este articulo escrito por Sara Soueidan sxplica en detalle por que los atributos de presentación son importantes, y como utilizarlos cómo solución alternativa ( fallback ) si el CSS falla: Style Inheritance and the "Flash Of Unstyled SVG"

Donde poner las reglas CSS

Si queremos utilizar CSS para dar estilo a los elementos SVG, primero tenemos que saber donde poner estas reglas de estilo.

Elementos SVG en lÍnea

Si se trata de un elemento <svg> integrado en un documento HTML ( ¡ojo! tiene que ser HTML5 ), lo tenemos fácil. Podemos poner las reglas CSS para el SVG junto con las demás reglas que dan formato al HTML: dentro de un elemento <style>, por ejemplo en el <head> del documento HTML o en una hoja de estilo.css.

También podemos poner las reglas CSS dentro de un elemento <style> anidado dentro del mismo <svg>. ¡Ojo! En este caso es importante especificar el tipo: type="text/css". También es importante, aunque no imprescindible, poner las reglas CSS dentro de un bloque CDATA: <![CDATA[ /* Aquí van las reglas CSS */ ]]>

¿Por qué es importante? A veces en el CSS ( y en el JavaScript ) podemos utilizar caracteres como ">" que entran en conflicto con los "parsers" que analizan el XML (SVG en este caso). Pero aunque no utilizamos estos caracteres conflictivos es altamente recomendable utilizar el bloque CDATA.

  <svg . . . . >
  <style type="text/css">
        <![CDATA[
        circle {
          fill: red;
        }
        ]]> 
  </style>
  <circle . . . . />
  </svg>
Utilizar hojas de estilo externas

También podemos utilizar hojas de estilo externas. Una posibilidad es utilizar la regla-at @import que se utiliza para importar reglas CSS de otras hojas de estilo. La regla-at @import debe ser la primera cosa que aparece dentro del elemento <style>;. Todas las demás reglas CSS vienen después con una excepción: la regla-at @charset. Si necesitamos utilizar una regla-at @charset, esta tiene que ser la primera.

  <svg . . . .>
  <style>
        @charset "UTF-8";
        @import url(estilosSVG.css);
        rect{fill:#6ab150;}
      </style>
      <rect .../>
  </svg>
Documentos SVG

Si creamos un documento.svg para utilizarlo como imagen o como objeto incrustado, para referenciar una hoja de estilo externa podemos utilizar la regla-at @import como antes, o podemos utilizar esta sintaxis.

<?xml-stylesheet type="text/css" href="style.css" ?>

No hay que olvidar que el SVG se basa en XML y un documento XML puede referenciar una hoja de estilo externa mediante esta instrucción <?xml-stylesheet. . . . ?>

  <?xml-stylesheet type="text/css" href="style.css" ?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...................................

Utilizar el DOCTYPE es opcional.

Selectores CSS y espacios de nombre

Por defecto los selectores CSS son aplicables a todos los elementos del documento, fuera lo que fuera su espacio de nombre. Veamos un ejemplo.
Sabemos que en SVG podemos crear enlaces externos, y para esto, exactamente como en el HTML utilizamos el elemento <a>, aunque, en el SVG, la sintaxis es diferente:


<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="enlace.php">
    <text x="125" y="30" text-anchor="middle">algo de texto</text>
</a>

En el CSS el selector a selecciona tanto a los enlaces creados en el SVG como a los creados en el HTML. Para seleccionar solo a los elementos <a> creados en el SVG necesitamos utilizar espacios de nombres.


<p><a href="http://w3.unpocodetodo.info/canvas/introduccion.php">Canvas - una introducción</a></p>
  <svg width="250" height="50" viewBox="0 0 250 50">
  <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://w3.unpocodetodo.info/svg/introduccion.php">
        <text x="125" y="30" text-anchor="middle">SVG - una introducción</text>
   </a>
</svg>

En este ejemplo quermos dar estilo solo al segundo elemento <a>, el que aparece en el SVG. Para esto primero tenemos que definir, en el CSS, el espacio de nombres. y lo hacemos utilizando la regla-at @namespace seguida por el nombre que le queramos dar: "svg" en este caso.

 
@namespace svg "http://www.w3.org/2000/svg";

Para seleccionar solo los elementos <a> que pertenecen al espacio de nombres "svg" utilizamos esta sintaxis:

svg|a{font-family: Consolas}

See the Pen espacios de nombre en SVG #1* by Gabi (@enxaneta) on CodePen.

Alternativamente, podemos seleccionar solo a los elementos que tienen un atributo xlink:href. Para esto primero tenemos que definir el prefijo de espacios de nombres que en este caso llamamos xlink ( pero podemos llamarlo como queramos ):

@namespace xlink "http://www.w3.org/1999/xlink";

Ulteriormente para seleccionar solo a los elementos <a> que tienen un atributo xlink:href utilizamos esta sintaxis:

a[xlink|href]{font-family: Consolas}

See the Pen espacios de nombre en SVG #2* by Gabi (@enxaneta) on CodePen.

w3.org: Styling SVG content using CSS.