Insertar un logo SVG animado en WordPress

[ 25 julio 2016 ] [ Actualizado: 8 enero 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

SVG se esta popularizando, tener imágenes vectoriales ofrece una serie de ventajas, entre ellas la animación. En este artículo usaremos una imagen en formato SVG, la animaremos y la usaremos como logo en nuestro sitio web WordPress.

1- Imagen vectorial SVG

Partimos del hecho que tenemos imagen vectorial en formato SVG, esta imagen se puede construir en un software como Adobe Illustrator o Inkscape. Si abrimos esta imagen en un editor veremos una serie de código xml. A continuación se muestra la imagen de ejemplo que trabajaremos en modo código y el resultado al verla en un navegador.

Ver el Pen en Logo SVG ejemplo – Inicial por Jhon (@jmarreros) en CodePen

2- Animando la imagen SVG

Existen diferentes maneras de animar un archivo SVG, sin embargo veremos la opción SMIL que permite insertar el código de animación como parte de las etiquetas de SVG. La animación, para nuestra imagen de ejemplo, será de los dos engranajes y aplicaremos un efecto de rotación. El código final de la animación se puede observar a continuación.

See the Pen Logo SVG ejemplo – Final by Jhon (@jmarreros) on CodePen.

Básicamente cada elemento de engranaje es desplazado al origen, usamos el siguiente código:


 transform="translate(0,0)"

Luego, hemos insertado el código de animación dentro del elemento, por ejemplo:


        <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="360 fx fy"
                    to="0 fx fy"
                    dur="10s"
                    fill="freeze"
                    repeatCount="indefinite"/>

En donde fx y fy es la posición final del elemento, será la misma, puesto que, queremos que rote sin desplazarse.
Ten en cuenta que IE aún no soporta este tipo de animación en SVG, esperamos que en futuras versiones incluyan esto, sin embargo en el resto de navegadores lo verás correctamente.

3- Subir imágenes SVG en WordPress

Por defecto en versiones actuales de WordPress no es posible insertar archivos SVG, tal como lo haríamos con una imagen JPG, por lo que, se tiene que agregar el siguiente código en el archivo functions.php del theme que estamos usando.


function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

En le siguiente artículo puedes aprender cómo usar imágenes SVG en WordPress.

4- Insertar el archivo SVG como logo

Finalmente, una vez tenemos subida la imagen SVG, reemplazaremos el logo, sin embargo para algunos themes no será posible la asignación directa, en nuestro ejemplo, para el theme twentysixteen, tenemos que modificar el archivo header.php del theme, modificamos y agregamos el siguiente código.

<?php //twentysixteen_the_custom_logo(); ?>
<a href="/"><img src="#" alt="texto alterno"/></a>

En el código anterior, ubicamos el código PHP que carga el logo personalizado y lo comentamos, en su lugar, usaremos código HTML. Tenemos que reemplazar el enlace, para ir la home del sitio, y reemplazar # por la url de la imagen SVG que hemos subido a nuestro sitio.

¿Aún con dudas?, te sugiero revisar el siguiente video, en donde se detallan cada uno de los puntos tratados anteriormente.