Dar estilo a SVG con CSS: capacidades y limitaciones

SVG es el nuevo estándar para imágenes vectoriales en el navegador. Los editores de vectores como Adobe Illustrator permiten guardar directamente en ese formato y los navegadores modernos no tienen problemas para mostrar SVG correctamente. Como los gráficos SVG consisten en marcado, se pueden crear y mantener con su editor de texto favorito, tal como lo hace con su HTML. Incluso es posible diseñar SVG con CSS, aunque necesitará conocer algunas diferencias al hacerlo, en comparación con el diseño de HTML.

Atributos SVG y propiedades CSS

La línea divisoria entre HTML y CSS es recta. HTML se preocupa por el contenido y la estructura, CSS se preocupa por la apariencia. En SVG, esta línea está borrosa, por decir lo menos. Esa es la razón principal por la que el texto y las formas en SVG generalmente se controlan utilizando atributos de elementos y no CSS:

<rect x="10" y="10" width="300" height="100" fill="red" stroke="green" stroke-width="2" />

En este ejemplo, dibujamos un rectángulo que está coloreado usando fill. El color y la fuerza del marco exterior del rectángulo están definidos por los atributos stroke y stroke-width.Pero, también podría diseñar el reenvío de esa manera usando CSS:

<rect x="10" y="10" width="300" height="100" style="fill: red; stroke: green; stroke-width: 2" />

Simplemente abusamos de los atributos como propiedades CSS. Sin embargo, esto no funcionará para todos los atributos. No podrá definir posiciones y valores de ancho y alto de esa manera. Simplemente nos quedaremos con y así como width y height atributos Al igual que en HTML, también podríamos trabajar con clases e ID en cualquier elemento. De esta forma, definiríamos el aspecto de un grupo de elementos en SVG a través de una clase con estilo.

<style>
  .example {
    fill: red;
    stroke: green;
    stroke-width: 2;
  }
</style>

<rect x="10" y="10" width="300" height="100" class="example" />

Como SVG no diferencia entre un Head y un Bodylas hojas de estilo y el contenido real comparten el elemento SVG, que es comparable a un elemento HTML.

Uso de pseudoclases

Usando pseudoclases como :hover es posible en SVG, incluso en combinación con la propiedad CSS3 transition.

<style>
  .example {
    fill: red;
    stroke: green;
    stroke-width: 2;
    transition: all 2s ease;
  }
  .beispiel:hover {
    fill: blue;
  }
</style>

Habiendo implementado este ejemplo, elementos flotantes que llevan la clase example conduce a un cambio de color de rojo a azul. Para que funcione correctamente, asegúrese de no incrustar el SVG como un Img. Escoger Embed o Iframe en cambio:

<embed src="https://www.noupe.com/design/example.svg" />

Utilizando Img ciertamente mostraría el SVG correctamente. Pero los efectos de desplazamiento y las transiciones serían ignorados. Además transition también podríamos usar transform. Los elementos se escalarían o rotarían de esa manera.

<style>
  .example:hover {
    fill: blue;
    transform: rotate(20deg);
  }
</style>

Mientras usa CSS3, asegúrese de agregar prefijos de proveedores para admitir tantos navegadores modernos como sea posible. Si bien Chrome y Firefox no tienen problemas para renderizar sin problemas, Internet Explorer se negaría a mostrar su creación incluso en la versión más reciente, mientras que es perfectamente capaz de mostrar estas propiedades CSS3 cuando se usa en HTML.

Consultas de medios y SVG

Si desea ajustar su SVG para cambiar el tamaño a ciertas resoluciones, simplemente use las consultas de medios dentro de él:

<style>
  @media only screen and (max-width: 800px) {
    .example {
      display: none;
    }
  }
</style>

Este ejemplo asegura que los elementos clasificados example no se muestran tan pronto como el ancho visible cae por debajo de 800 píxeles. Tenga en cuenta que no es el ancho de su documento lo que define eso, sino el ancho del elemento que lleva su SVG.

<embed src="https://www.noupe.com/design/example.svg" width="500" />

En este ejemplo, los elementos clasificados example no se mostraría, ya que el ancho definido es de solo 500 píxeles. Las consultas de medios en SVG también son útiles para optimizar los gráficos para la impresión.

<style>
  @media only print {
    .example {
      fill: none;
    }
  }
</style>

En este ejemplo, omitimos mostrar el color de relleno en la impresión. Espero haber podido mostrarte lo fácil que es trabajar con CSS dentro de SVG. Las ventajas son evidentes. Sin embargo, los navegadores más antiguos y el Internet Exploder seguirán trayendo problemas.

(dpe)