SVGS en WordPress: cómo cargarlos y por qué usarlos

Este artículo trata sobre SVGS: cómo y por qué usar SVGS en WordPress, incluida cómo permitir los archivos SVG a WordPress. Ya sea que desee, teme o simplemente no comprenda este formato de imagen, le ofrecemos. ¿Qué es un SVG? SVG significa gráficos vectoriales escalables. Es un formato de archivo para gráficos 2D usando XML. Según Mozilla Developer Network, SVG es esencialmente para gráficos lo que HTML es para el texto. ¿Cuáles son los beneficios de los SVG? Como formato vectorial, los SVG tienen una resolución infinita: puede aumentar para siempre y permanecer completamente claro.
Debido a que SVG es un formato vectorial, los archivos SVG son escalables sin pérdida de calidad. En otras palabras, a diferencia de PNG o JPG, los SVG tienen una resolución infinita: puede aumentar para siempre y permanecer completamente claro. (¡Pruebe uno de los SVG en este artículo!) Los SVG también tienen, en general, aunque no siempre, dimensiones de archivo más pequeñas que otros formatos de imagen. Además, los SVG se pueden animar. Finalmente, los SVG pueden ser más accesibles que otros formatos, como las fuentes de iconos, porque puede agregar una marca adicional que ayuda a los lectores de la pantalla a comprender su propósito.
¿Cuáles son las desventajas de los SVG? Los SVG están sujetos a los mismos vectores de ataque que XML. Los SVG no son un formato tan adecuado para las fotos. Aunque puede cortar archivos JPG en SVG, los resultados son menos estelares. La principal desventaja de usar SVGS es la seguridad. Debido a que SVG es un formato de documento y se basa en XML, está sujeto a los mismos vectores de ataque que XML. La publicación de Fortinet explica los tipos de ataques a los que los SVG podrían ser vulnerables. Este video explica la anatomía de un SVG malicioso: https: //www.youtube.com/watch? V = bt0axhsmddu
¿Significa esto que los SVG no son seguros de usar?
No, pero tienes que tener cuidado. Cree sus propios SVG, puede crear sus propios SVG utilizando cualquier software de gráficos vectoriales. Tradicionalmente, esto fue con Adobe Illustrator, pero hay alternativas gratuitas. Dos son el programa Inkscape o el sitio web Vect. Los SVG pueden contener líneas, polígonos, formas de texto o de texto. Los coloridos SVG tienen uno o ambos contornos (contorno de forma) y relleno (un color o gradiente sólido). Un rectángulo simple creado con Inkscape. SVG es de 0.76 kb en comparación con 1.33 kb (75% más) para un PNG con la misma imagen.
Después de haber creado su SVG, ejecutarlo a través de un optimizador para eliminar cualquier hinchazón de código que pueda agregar su programa de gráficos.

Aquí hay dos:
Optimizador SVG
Svgomg
¿Cómo se agregan SVG a las páginas web? Hay algunas formas diferentes de agregar SVGS al código HTML.
En primer lugar, puede agregar una etiqueta y agregar la ruta al archivo SVG. Por ejemplo

en segundo lugar, puede agregar SVGS en línea. Esto significa agregar el código SVG directamente a la página en lugar de referirse a él en un archivo. en tercer lugar, usted, usted puede agregar un SVG como imagen de fondo con css.html:
​​
css: .background {background-image: url (img/target.svg); Background-Read: No-Reed; Tamaño de fondo: 200px; Ancho: 200px; Altura: 200px; } En cada caso, el SVG muestra exactamente lo mismo en la página. Observe que el ancho y la altura son los mismos valores cada vez.

El puerto de visualización de SVG, ViewBox y el tamaño SVG SVG no se comportan como otras imágenes cuando se trata de tamaño. Eso es porque realmente son documentos. La ventana SVG muestra el área visible de SVG. Esto se define por los atributos de ancho y altura del elemento . Si no especifica una unidad para el ancho o la altura, se supone que usa píxeles. De lo contrario, puede usar más otras medidas, incluidas EM, %, MM, CM y pulgadas. Cuando no se usan unidades, el atributo ViewBox puede definir dónde se encuentra el SVG en la ventana de la vista y cuánto se ve. Se compone de 4 parámetros: x, y, ancho y altura. Me resultó difícil entenderme con cómo funciona el sistema de coordenadas, hasta que me encontré con elementos SVG de Amelie Wattenberger, que tiene una demostración brillante interactiva. Amelie compara Viewbox con un telescopio, con coordenadas X e Y utilizadas para viajar y ancho y altura para ampliar.
Aquí está el código para un cuadrado SVG que agregué a una línea en línea para experimentar con ViewBox. Vea lo que sucede en el cuadrado cuando se establecen diferentes valores de ViewBox:

Aquí hay otros dos buenos blogs sobre este tema:
Cómo escalar SVG

Comprensión de los sistemas y transformaciones de coordenadas de SVG (Parte 1) – Viewport, ViewBox y PreverVeSpeteratio

La forma más predecible que encontramos para controlar el tamaño de un SVG y su capacidad de respuesta es hacerlo bastante grande en el programa gráfico que usa. Parece mucho más fácil reducir un SVG que crecer. WordPress y SVG se cargan en la biblioteca de medios de WordPress no permite las cargas de SVG en la biblioteca de medios, por las razones de seguridad mencionadas anteriormente. Si lo intenta, verá un mensaje como este: “Ejemplo.svg” no se ha cargado. Lo sentimos, este tipo de archivo no está permitido por razones de seguridad. Entonces, ¿cómo puedes evitar eso? La respuesta es con complementos. SVG Carga en WordPress Dos complementos que prometen el uso seguro de SVG son SVG Support y Safe SVG. Ambos incorporaron la desinfección de los archivos para escanear archivos SVG y eliminar cualquier código malicioso.
Debido a que ningún software de desinfección es perfecto, tenga cuidado de descargar y usar SVG de fuentes inseguras. Puede abrir el archivo en un editor de código primero solo para verificar. Una vez que active las cargas de SVG, cualquier persona con el papel del autor o más en su sitio tendrá permiso para agregar SVG al sitio, a menos que haya activado las restricciones de carga a través de su complemento. ¡Cuánto confía en sus usuarios! Soporte SVG
El soporte de SVG es lo que usé para agregar SVG a este artículo. El soporte de SVG es gratuito y tiene algunas funciones fuertes:
Agregue SVGS a o etiquetas de línea
Agregue una clase para su stiling o animación SVG: SVG Assistance usa Style-SVG pero puede cambiar esto
Restringir las cargas solo a los administradores

Forzar a todos los SVG a mostrar en línea (necesaria para algunas páginas como DIV) SVG Support es lo que usamos para agregar SVG a este artículo. Funciona excelente fuera de la caja. Para la seguridad, nos aseguramos de activar “¿Restricción a los administradores”? La opción, lo que permite que solo los usuarios del administrador de WPShout carguen SVG en el sitio:
Al momento de escribir, agregar la propia clase a un SVG en un bloque de imágenes de Gutenberg para que lo haga en línea no funciona como se esperaba debido a la forma en que se marca el bloque. Este es un problema conocido y debe resolverse en una versión futura. SVG SAFE
Safe SVG tiene una versión gratuita y premium. La versión gratuita desinfecta SVGS y muestra vistas previas en la biblioteca de medios. Para la suite completa, debe actualizar. Los precios comienzan desde 39 GBP para un solo sitio. La versión profesional te permite:
Elija quién puede cargar SVG después del usuario
Escanee los archivos SVG con carga previamente cargada
Agregue SVGS en línea, incluso en Gutenberg

Optimizar los SVG para cargar

Ver un registro de higiene
Ir a asistencia premium
Hay una demostración en línea de SVG seguro desinfectante si desea probarlo. Elementary Si usted es un usuario del complemento elemental, puede activar el soporte SVG para cargar SVG para los iconos de arado. La opción no se activa de forma predeterminada. Elementor intentará desinfectar sus SVG, pero le advierte sobre el riesgo potencial de permitir los cargos de SVG.
La aparición de SVG en WordPress en el tema de los veinte veinte, el siguiente estilo afecta las imágenes, incluidas las SVG, cuando se usa el editor clásico: SVG, IMG, INSCRIVE, Object {Display: Block; Altura: Auto; MAX-ANCHO: 100%; } No verifiqué esto con muchos otros temas, pero uso altura: coche; y máximo ancho: 100%; para fotos. Si usa el editor de bloques, independientemente del tema, se aplica este estilo (para todas las imágenes): .wp-block-image img {max-width: 100%; } Puede cambiar el tamaño de su SVG cambiando a una de las dimensiones de medios preestablecidos o estableciendo el ancho o la altura en píxeles. Gran martimos
Ancho de 280px
Descubrí que tratar de usar un tamaño % para un SVG en el editor de bloques no funcionó: hizo que el SVG desapareciera por completo. SVG Animaciones de WordPress Puede animar SVG con CSS o JS. Jackie D’Elia tiene un hermoso tutorial sobre este tema, el uso de la animación SVG en WordPress, que incluye un remedio para un comportamiento de visualización de Firefox diferente. Hay varias herramientas para llevar a cabo animaciones. Probé Svgator, que es libre durante un período de prueba de 14 días. Hay instrucciones especiales para agregar una animación SVG de Svgator a WordPress, porque es algo complicada. Tuvimos más éxito con el Método 2. Otras formas de usar SVG en WordPress Algunos temas y complementos incluyen iconos SVG en uno de los topics o carpetas de arado, por lo que no hay problema de carga. Soy una forma fácil y segura de usar SVG. “Veinte” temas de WordPress que comienzan con veinte diecisiete, los temas predeterminados de WordPress tienen un menú de enlace social usando SVGS.
Un único icono tiene este código: Si está familiarizado con los rociadores de imagen, #icon-twitter se refiere al icono de Twitter en el archivo svg-icons.svg, que contiene todos los iconos. El código de icono de Twitter dibuja el formulario: Font Awesome Plugin Font Awesome trae su popular conjunto de iconos a WordPress. En la configuración avanzada del complemento existe la opción de elegir los iconos SVG en el método del método.
Efecto del efecto de fuentes Extralare SVG SVG Opción Awesome le permite hacer algunas cosas que no puede hacer con las fuentes de iconos.Rotación, enmascaramiento y estratificación Puede rotar un icono en grados.
También puedes hacer algunos efectos de enmascaramiento excelentes.! Div> Además, puedes estratificar más iconos.! 6
Animación de rotación, también puede usar la clase FA-SPIN para rotar un icono continuamente.!

Accesibilidad SVG para hacer una imagen SVG accesible depende del propósito de la imagen y de la forma en que la incluye.SVG decorativos Si la imagen es decorativa y agregada por una etiqueta , debe tener otro atributo nulo.

Si SVG se usa en línea, agregue el área-hydden = “true” a la etiqueta . SVG semántico (significativo).Para SVG con un significado que usa una etiqueta , agregue Rollers = “IMG” y texto alternativo que representa lo que representa la imagen.


Aquí hay un ejemplo de un código para un SVG significativo. < La lluvia cae de una nube gris </ g relleno = "#00b4f4" transform = "traduce (-19.212 -24. 913) "

> Tenga en cuenta que: la etiqueta tiene atributos de rodillo = “img” y aria-labelledby.

La etiqueta Resumir SVGS puede ser muy útil para el tamaño para el tamaño El archivo más pequeño del archivo, la mejor accesibilidad y el potencial de animación. Son particularmente útiles como íconos. Debe equilibrar a estos profesionales en comparación con agregar uno o más complementos para usarlos, mantener la seguridad de su sitio y aprender SVG para hacer las cosas. Pero en general, creo que la inclusión de SVG en WordPress vale la pena. ¡Gracias por leer! Nos gustaría escuchar sus preguntas o pensamientos sobre los SVG en los comentarios a continuación o en nuestro grupo de Facebook.