Cómo agregar SVG a WordPress: su guía para imágenes vectoriales en WordPress

Los SVG (como estos de Freepik ) son ideales para imágenes simples sin demasiados elementos complejos, como iconos.

SVG no es un formato de imagen per se. De hecho, en realidad es un lenguaje de marcado que se usa para crear imágenes bidimensionales compuestas de vectores. Esto puede sonar complejo en teoría, pero en la práctica, usará SVG en las mismas situaciones que usaría con cualquier otra imagen.

Esto es importante porque los SVG tienen algunas ventajas sobre los tipos de imágenes más comunes, como PNG y JPG. Por ejemplo:

• Ocupan menos espacio.  En lugar de píxeles, los SVG se componen de vectores. Por lo tanto, sus imágenes pesarán menos , lo que debería ayudar a que su sitio se cargue más rápido .
• Puedes escalarlos fácilmente.  Como sabrá, existen límites en cuanto a la escalabilidad de las imágenes regulares antes de que comiencen a verse terribles. Ese no es el caso con los SVG, ya que los vectores se pueden escalar hacia arriba o hacia abajo sin pérdida de calidad (o cambio en el tamaño del archivo).
• Puedes animar SVG con CSS.  Los vectores se pueden animar usando CSS, lo que puede generar algunos efectos únicos (hablaremos más sobre esto más adelante).

Crear tus propios SVG puede ser difícil si no tienes experiencia en diseño. Sin embargo, siempre puede buscar imágenes de archivo SVG o preguntarle a su diseñador si puede replicar algunos de los elementos de su sitio usando el formato.

Tenga en cuenta que cuanto más compleja sea una imagen, más difícil será replicarla usando vectores. En otras palabras, los SVG son una buena alternativa para gráficos simples como logotipos e íconos  , pero no funcionan tan bien para las fotografías.

Cómo agregar SVG a WordPress (dos métodos fáciles)

Como mencionamos anteriormente, WordPress no es compatible con SVG de fábrica. Sin embargo, puede habilitar esta función manualmente o usar un complemento para hacerlo. Comencemos con el último método porque es el más simple.

Método 1: utilice el complemento de compatibilidad con SVG

Si está buscando la forma más rápida de agregar SVG a WordPress, aquí está. Vamos a utilizar el complemento SVG Support, que habilita este formato de imagen en particular  y  lo agrega a su biblioteca de medios:

El proceso es simple. Solo necesita instalar y activar el complemento como de costumbre, y luego podrá agregar SVG a su sitio de WordPress.

WordPress ahora requiere que tengamos la etiqueta en nuestros archivos SVG antes de cargarlos. Abra su archivo SVG en cualquier editor de código (como texto sublime) y agregue lo siguiente a la primera línea de su archivo SVG y guárdelo, para que no encuentre errores de seguridad:

Sin embargo, hay dos configuraciones más que quizás desee cambiar según sus necesidades. En primer lugar, vayamos a la  pestaña Configuración → Compatibilidad con SVG  :

En el interior, encontrarás dos opciones. El primero activa el  modo avanzado del complemento , que le permite orientar sus SVG con CSS. Si no desea animar sus SVG, puede omitir esta opción.

En segundo lugar, también puede restringir la capacidad de cargar archivos SVG solo a los administradores habilitando la opción  ¿Restringir a los administradores? rasgo. ¡Ese depende de ti!

Método 2: modifica el archivo functions.php de tu sitio 

Cada sitio web de WordPress tiene su propio  archivo functions.php  . Este componente esencial incluye funciones, clases y filtros importantes. También es su boleto para agregar soporte SVG a WordPress a través de unas pocas líneas de código.

Para acceder a este archivo, deberá acceder a su sitio web a través de FTP. Si no tienes un cliente, te recomendamos usar FileZilla . Una vez que haya encontrado sus credenciales de FTP y accedido a su sitio, querrá dirigirse a su  rootcarpeta, que generalmente se llama  public_htmlo lleva el nombre de su sitio:

Ahora, ingrese a la  wp-includescarpeta y busque el  functions.phparchivo dentro. Es importante tener en cuenta que este es el archivo principal, mientras que también hay  functions.phparchivos individuales para cada uno de sus temas:

Para este ejemplo, agregaremos el código al archivo principal. Sin embargo, es posible que los cambios se pierdan cuando se actualice WordPress, así que siéntase libre de agregarlo alternativamente a su functions.phparchivo específico del tema según el enfoque con el que se sienta más cómodo.

(Nota del editor: hacer esto en el archivo de funciones de su tema es en realidad el enfoque recomendado).

Acceda al  functions.phparchivo ahora haciendo clic derecho sobre él y eligiendo la  opción Ver/Editar  . Esto lo abrirá usando su editor de texto predeterminado. Ahora, desplácese hasta la parte inferior y pegue este fragmento de código allí:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

Guarde sus cambios en el archivo y ciérrelo. Luego, puede volver a su tablero y probar su nueva característica cargando un archivo SVG a su biblioteca de medios, ¡que debería funcionar sin problemas!

Anima tus imágenes SVG usando CSS

Animar tus SVG es un proceso algo complejo, especialmente si no tienes mucha experiencia en el uso de CSS . Sin embargo, esta función puede ayudarlo a crear animaciones simples que pesan muy poco, especialmente en contraste con los GIF. Además, puede escalar sus SVG animados hacia arriba o hacia abajo según sea necesario, que es algo que (nuevamente) los GIF no pueden hacer bien.

Si desea leer más sobre cómo animar archivos SVG usando CSS, puede encontrar  tutoriales en línea  que lo guiarán a través de los conceptos básicos del proceso. Además,  mira algunos ejemplos de lo que puedes crear si te lo propones.

Conclusión

Los SVG son uno de los tipos de imágenes más interesantes que puedes usar en tu sitio web. Su escalabilidad no solo los convierte en una buena opción para sitios receptivos, sino que también puede animarlos para que puedan sustituir a los GIF en ciertas situaciones. Además, habilitarlos en WordPress es notablemente simple.

Simplemente elija uno de estos dos métodos para agregar SVG a WordPress, y podrá jugar con el tipo de archivo a su antojo:

1. Use el complemento Soporte SVG si no quiere perder el tiempo con el código.
2. Modifique su  functions.phparchivo para agregar soporte para SVG si no desea instalar un complemento adicional.

¿Tiene alguna pregunta sobre cómo agregar SVG a WordPress? ¡Pregunte en la sección de comentarios a continuación!