Cómo usar SVG en WordPress

A pesar del hecho de que SVG se estandarizó a principios de la década de 2000, el formato de imagen extremadamente atractivo no vio demasiada luz debido al débil apoyo del navegador. Todo esto ha cambiado drásticamente en los últimos años, porque SVG se convierte rápidamente en la forma de imagen de facto en la web. Y no solo los diseñadores gráficos se enamoran de SVG, sino también a los usuarios de WordPress que desean acelerar sus blogs reduciendo el tamaño total de la imagen. Esta publicación explorará el tema cómo usar SVG en un sitio basado en WordPress. ¿Qué es SVG? SVG (Scalable Vector Graphics) es una imagen basada en XML para mostrar los gráficos web y en las aplicaciones. En principio, un archivo SVG es simplemente una colección de código XML que especifica diferentes formas y colores utilizados en una imagen SVG.
Y, debido a que puede abrir archivos SVG con un editor de texto, también es fácil de personalizar con el código CSS3 y JS Basic. Como resultado, los usuarios de la web modernos aprecian mucho los SVG debido a su versátil flexibilidad. Lo más importante, W3C reconoce SVG como un estándar máximo en la industria. Por lo tanto, SVG funciona sin problemas con otras tecnologías basadas en la web, como DOM, HTML, etc. ¿Por qué es importante SVG? Las imágenes SVG se basan en vectores, como resultado, una imagen SVG puede ser infinita en la pantalla sin perder calidad. La interacción básica a este respecto es el navegador XML; donde el navegador dibuja la especificación XML con cada aumento o disminución.
No hace falta decir que los archivos SVG son mucho más flexibles que los formatos tradicionales, como PNG o JPEG. Y la interacción directa entre CSS y JavaScript significa que puede adaptar sus imágenes SVG. Esto es esencial cuando se trabaja en un nuevo diseño o de otra manera. ¡Puede usar SVG para diseñar prácticamente cualquier cosa! Incluso un kit de batería animado, si quieres. Véalo en acción: https://codepen.io/iamjoshellis/pen/kvdqqm En términos de rendimiento, las imágenes SVG tienden a ser significativamente más pequeñas que cualquier contraparte. Como resultado, es común ver que las ilustraciones, logotipos e iconos se crean como gráficos vectoriales. Esto también condujo al desarrollo de muchas fuentes de iconos, que mencionaremos brevemente en el artículo más adelante.

En resumen, los SVG proporcionan flexibilidad, tamaño de imagen pequeño y una base sólida para mejorar el rendimiento de la imagen en su sitio web de WordPress. ¿Cómo se crean las imágenes SVG? La creación de imágenes SVG puede ser de dos maneras: escribir el “código” y usar software de diseño gráfico moderno. El primer método, que es escribir el script XML, es la forma tradicional de construir archivos SVG, pero puede ser una técnica lenta e ineficiente. Una simple colección cuadrada podría verse así en formato XML:
Como puede ver, escriba esto repetidamente para obtener gráficos complejos es lo mismo que disparar su pie.

El otro método es el uso del software, y esta es la forma más rápida y eficiente de crear gráficos SVG. Con el software basado en vectores, puede concentrarse en crear gráficos y más tarde en su exportación como archivos SVG listos para hacer.
Affinity Designer es un programa profesional de edición vectorial conocido, pero también es un software como Adobe Illustrator, Sketch, Figma y Inkscape. Independientemente del software que decida usar, lo único que realmente importa son sus planes para el tipo de gráficos que desea crear. La funcionalidad de exportación funciona igual en todos los programas modernos. Diré que SVG es siempre la misma estructura XML. Por lo tanto, puede usar imágenes SVG como documento e insertarlas en línea. WordPress acepta SVG? No importa cuán extraño suene, una plataforma con la esfera de WordPress en realidad no acepta el formato de archivo SVG. Pero solo por serias preocupaciones de seguridad. Ver, a diferencia de los tipos de archivos PNG/JPG/GIF, SVG no es una imagen nominal, sino un vector. Como resultado, SVG está expuesto a los riesgos de explotación de JavaScript, y WordPress ha elegido no permitir SVG en WordPress por defecto. Tiene sentido desde todos los puntos de vista.

Aunque los colaboradores de WordPress han hablado sobre SVG durante muchos años, hay demasiados ángulos para abordar los problemas de seguridad. Por lo tanto, la única forma de resolver esto es a través de complementos o activando SVG como formato de archivo utilizando las funciones del tema. ¿Cómo activar las imágenes SVG en un sitio web de WordPress? Antes de llegar al lado de los complementos, puede activar SVG en WordPress a través de las funciones.php desde su directorio de tareas. Esta es definitivamente la forma más rápida, pero también la menos segura, porque activa SVG en formato bruto.
// Enable formato de archivo SVG para WordPress Suparge Función ADD_FILE_TYPES_TO_UPLOADS ($ file_types) {$ new_filetypes = array (); $ new_filetypes [‘svg’] = ‘image/svg+xml’; $ file_types = array_merge ($ file_types, $ new_filetypes); Devuelve $ file_types; } add_action (‘upload_mimes’, ‘add_file_types_to_uploads’); Y la otra opción, más segura, es usar complementos. Aquí hay tres de los complementos más prominentes para activar SVG en WordPress. El soporte SVGADADING SVG es la mitad de la pelea, es posible que también desee agregar un estilo personalizado, efectos de animación y activar restricciones. Pero para hacer todo esto, necesitas apoyo.

Con SVG Assistance: puede comenzar a agregar archivos SVG a sus publicaciones y páginas utilizando la etiqueta de imagen tradicional. Por ejemplo, puede agregar una nueva clase CSS a las imágenes: “Style-SVG”, que se hará cargo de la imagen SVG cargada y reproducirá su contenido en una pantalla en línea. Las características principales de este complemento son:
Habilite la administración de archivos SVG en la biblioteca de medios de WordPress.

Convierta las imágenes SVG cargadas en código en línea.
Acepte el widget de imagen para agregar etiquetas ALT y subtítulos a todas las imágenes SVG.
Stile las imágenes SVG individuales utilizando CSS personalizado.
Implemente efectos animados con CSS3 y JavaScript.
Páginas de configuración detalladas del enchufe en el enchufe.
Implementado acceso basado en permisos. Por ejemplo, restringir la carga solo a cuentas con privilegios de administrador.
Palabra de advertencia de que, a pesar de lo que ofrece este complemento, los riesgos de explotación de SVG son bastante reales. No active la administración de archivos SVG para los usuarios en los que no confía. Entonces, idealmente, activaría esta función solo para los usuarios a nivel de administrador. Para reiterar, cualquier persona con privilegios de carga puede cargar nuevos archivos SVG, pero debido a que los archivos SVG se basan en XML, están abiertos a la explotación a través de inyecciones maliciosas. Y de lo contrario. . SVG SAFE
Safe SVG es un complemento que le brindará tranquilidad en preocupación por los riesgos de seguridad potenciales. El complemento se crea especialmente para desinfectar cualquier nueva carga de SVG y evitar la intención maliciosa. Además, SAFE SVG agrega la capacidad de ver qué tipo de archivos SVG ha cargado a través de su biblioteca de medios. Con 50,000 usuarios activos, puede confiar en SAFE SVG para proporcionar un excelente rendimiento seguro. Vale la pena señalar que hay dos versiones diferentes para este complemento; Gratis y pagado.
La versión gratuita incluye funcionalidad para desinfectar nuevas cargas y también agrega soporte para la visualización de SVG a la biblioteca de medios.
Si elige la versión Pro, recibirá características adicionales como la optimización de SVGO. Esta técnica de optimización reducirá aún más el tamaño del archivo cargado de SVG. Además, con Pro, puede elegir quién puede o no cargar nuevos archivos SVG. Como resultado, puede restringir el acceso solo a ciertos usuarios. Y, finalmente, comprar el complemento, obtenga acceso a la asistencia premium: obtiene una respuesta a sus preguntas cuando más lo necesite. Agregue el soporte completo de SVGAR que necesita para obtener resultados razonables con los dos primeros complementos que enumeramos. Pero si le gusta la idea de agregar SVG a su sitio utilizando códigos cortos, consulte este complemento. Este complemento agrega alguna funcionalidad SVG a WordPress y utiliza una idea de Alexey Ten de SVG. Esta forma de incluir imágenes SVG en HTML parece ser la mejor combinación de rendimiento y compatibilidad en este momento. Agrega el soporte SVG completo permite la carga de SVG y la generación de códigos cortos. Además, puede personalizar el estilo de cada elemento SVG utilizando CSS personalizado. Por último, pero no menos importante, puede especificar una foto de copia de seguridad para cualquiera o todos los SVG que cargó. ¿Cuáles son otros complementos SVG útiles para WordPress? Además de agregar soporte SVG a un sitio de WordPress, ¿qué otros complementos existen que podrían beneficiar a su sitio? Todos y la abuela saben que hay importantes beneficios de rendimiento. Ambos en términos de tamaño de archivo, pero también la capacidad del navegador para reproducir gráficos vectoriales en línea. Iconos de WP SVG
Los íconos son un elemento visual, y tales elementos tienden a dar a los diseños una nueva vida. Bastante interesante, este complemento nació de una necesidad personal. El autor quería comenzar a implementar más archivos SVG en su diseño, pero no encontró una solución para ello. Entonces, se tomó su tiempo y esfuerzo y creó íconos de WP SVG. Este complemento es muy fácil de usar y puede reemplazar los iconos existentes en su sitio en solo unos pocos clics. Lo mejor es que ni siquiera debe recrear cada imagen para pantallas de retina, siempre que establezca el ancho máximo, el icono se escalará automáticamente. Al igual que con los autores, este complemento es excepcional para todo tipo de actividades de desarrollo, multisites y clientes. Sin restricciones, no tiene que preocuparse por la compatibilidad de los temas o algo de este tipo. Parece que también hay una versión premium en la oferta, con una característica que permite cargar íconos personalizados. Así que no se limite a los íconos integrados. Menú social SVG

Este es un complemento que funciona como un widget para mostrar iconos de redes sociales a través de imágenes SVG. Para que este complemento funcione, todo lo que tiene que hacer es crear un nuevo menú de WordPress con enlaces a sus perfiles sociales. Luego seleccione la ubicación personalizada del menú social SVG y guarde el nuevo menú. Después de eso, puede usar el widget de menú social SVG en la barra lateral o en otras áreas preparadas para widgets de su blog. Twitter, Dribbble, Pinterest, GitHub, Tumblr, YouTube, Flickr, Vimeo, Instagram, LinkedIn, Xing /Feed , Mailto. LOGO SVG y TextSlate Effects es un complemento que permite un soporte de código corto para agregar efectos SVG personalizados. Puede usar este complemento para promover una imagen sólida de la marca, subrayar los widgets CTA o hacer que los artículos se destaquen a su manera. El uso inteligente del soporte para códigos cortos significa que puede editar y personalizar sus efectos en cualquier momento. Por ejemplo, puede mezclar diferentes colores, fuentes, filtros y usar muchos modelos de llenado que se manifiestan como efectos de diseño que llaman la atención. Slate ofrece tanta libertad creativa como un software de edición vectorial, ¡pero solo sin tener que usar ningún software! Entonces, ¿cuáles son algunas de las características clave?
Texto. Genere códigos cortos que puedan reproducir los efectos de los efectos del texto que capta la atención, pero amigable con el SEO. Al igual que lo que ves en la instantánea anterior.


Fuentes. ¿No está seguro de dónde obtener fuentes personalizadas? No se preocupe, porque Slate viene previamente empaquetado con la enorme biblioteca de Google Font. Las cartas están llenas de un patrón de llenado de su elección. Los modelos de llenado tienen parámetros. Controle diferentes tamaños, distancias y colores para producir variaciones únicas o permita que la configuración predeterminada funcione para usted.

¡Y más! Este complemento es un centro potente para crear su texto y logotipos con una precisión excepcional. Y a través de SVG, nada menos. ¿Dónde puedes encontrar gráficos SVG? ¿Qué puede hacer si no tiene experiencia previa en diseño gráfico vectorial? Afortunadamente, encontrar SVGS hoy en día es simple y simple. A lo sumo, solo tienes que vincular al autor original que hizo el gráfico. Y muchas plataformas proporcionan imágenes gratuitas sin el requisito de asignación. Aquí hay algunos sitios increíbles que proporcionan contenido SVG gratuito:

FONTAWESODOUSED – FUNT ADRIVIENTE La mejor biblioteca de iconos de fuentes del mundo. El proyecto se ha fortalecido durante varios años y tiene un soporte en profundidad no solo para navegadores, sino también de marcos y software de diseño específicos. ¡Este paquete de fuentes orientado a la accesibilidad es un asesino absoluto y tan simple! De hecho, estoy seguro de que hay una docena de complementos de WordPress que admiten un soporte increíble de fuentes.

VECTEEZY – VECTEEZY es probablemente la plataforma de gráficos vectoriales más grande del planeta. Huyó por modelos personalizados, contribuciones comunitarias y datos basados ​​en la web: ViceEezy tiene vectores disponibles en cualquier tipo de categoría, forma o forma. Y es muy fácil descargar archivos. Todo lo que tiene que hacer es volver a iniciar sesión en la página del autor desde la que tomó el archivo. Este es un sitio que uso con frecuencia. Fondos SVG: ¿conoce las últimas tendencias de diseño web? Hay tantos campos creativos en los que ahora se exploran los diseños. Y una de esas áreas son los fondos SVG. Tú también los viste. Patrones ondulados, líneas curvas, etc. ¡Use este sitio para generar fondos SVG de fácil acceso!

SVG Grabber: esta extensión de Chrome es una mano divina absoluta para obtener imágenes SVG de diferentes páginas del sitio web. Simplemente haga clic en el icono y la extensión puede hacerse cargo de cada archivo SVG en una página. Por supuesto, debe seguir las reglas sobre los derechos de autor donde pueda, pero en general se siente como una extensión sólida para usar con frecuencia.
El área de logotipos vectoriales dependiendo del nicho en el que trabaja, puede ser útil tener una colección de logotipos basados ​​en vectores de las marcas más importantes del mundo. También puede usar estos archivos al hacer anuncios o promociones específicos. Y la mayoría de los editores de fotos de hoy pueden convertir los archivos SVG en PNG y de todos modos.