Iconos SVG

Los iconos SVG son imágenes SVG, utilizados como íconos o botones de imágenes en aplicaciones web o móviles. Los iconos SVG también se pueden usar para logotipos. Este tutorial de iconos SVG explica cómo crear sus propios iconos SVG y dónde descargar iconos SVG predefinidos de alta calidad.

Ventajas de los iconos SVG

Las ventajas de usar iconos SVG es que se pueden ampliar y reducir fácilmente las imágenes en proporción, dependiendo de la posición en la que se mostrarán en la aplicación y del tamaño de la pantalla del dispositivo en el que se mostrará la aplicación. Los iconos SVG tienen ventajas sobre las imágenes bitmap, ya que al ampliar o reducirlos, siguen viéndose bien. Las imágenes bitmap tienden a pixelizarse al ampliar y perder calidad (píxeles) al reducir.

Usar iconos SVG en aplicaciones web

Como se mencionó anteriormente, hay varios métodos para mostrar SVG en navegadores webEn los navegadores webMostrar SVG, como parte de una página HTML. Sin embargo, al mostrar el icono SVG, es más fácil usar el elemento img de HTML para mostrar el icono, ya que el elemento img de HTML puede ampliar y reducir fácilmente el tamaño del icono SVG.

Este es el elemento de ejemplo que muestra el icono SVG:

<img src="svg-icon.svg">

Para ampliar o reducir el tamaño del icono SVG, simplemente use las propiedades de estilo CSS width o height. A continuación, se muestra un ejemplo de elemento img con la propiedad de estilo Height CSS agregada:

<img src="svg-icon.svg" style="height:32px">

Para mantener la proporción de aspecto del icono SVG al ampliar o reducirlo, debe establecer solo uno de los valores width o height - No puede establecer ambos valores simultáneamente. Cuando solo se establece uno de los valores de anchura, el navegador escalara el icono SVG en el otro eje para que el icono SVG mantenga su relación de aspecto.

Crear su propio icono SVG

A veces, es posible que necesite crear su propio icono SVG. Un icono SVG es simplemente una imagen SVG que se incluye en su propio archivo SVG. A continuación, se muestra un icono circular muy simple, compuesto por elementos SVG circle:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="
　　　　<circle cx="64"cy="64"r="64"estilo="relleno: #00ccff;"></circle>
</svg>

A continuación, se muestra el aspecto de este icono SVG junto con el elemento img que se muestra:

Pero, cuando utiliza el elemento img para mostrar este icono SVG y cambia el tamaño del elemento img, el icono SVG no se ampliará o reducirá. En su lugar, se mostrará más o menos el lienzo de SVG. A continuación, se muestra cómo se establece la propiedad Height CSS del elemento img:32Ejemplo:

Tenga en cuenta cómo solo mostrar una parte del círculo, en lugar de reducir proporcionalmente todo el círculo.

La causa de este problema es que el archivo de imagen SVG falta información. Debe establecer un valor para la propiedad viewBox de SVG. La propiedad viewBox de SVG especifica cuánto lienzo de SVG debe mostrarse (en las direcciones X e Y).

En nuestro ejemplo, solo queremos mostrar la parte del lienzo de SVG que contiene el icono de círculo. Este área se extiende desde el punto 0,0 hasta el punto128,}128（el radio del círculo es64，a64，64de centro. Al usar la propiedad Viewbox de SVG, podemos especificar que solo se renderice esta área del lienzo de SVG. A continuación se muestra la apariencia del icono circular de SVG con el valor de Viewbox configurado:

<svg xmlns="http://www.w3.org/2000/svg" estilo="xmlns:xlink="http://www.w3.org/1999/xlink" estilo="viewBox="0 0　128　128">
　　　　<circle cx="64"cy="64"r="64"estilo="relleno: #00ccff;"></circle>
</svg>

Este es el icono SVG que se muestra, con alturas respectivas de32、48y64Píxeles: