{"id":24286,"date":"2021-10-01T17:21:45","date_gmt":"2021-10-01T15:21:45","guid":{"rendered":"https:\/\/clientes.ignaciosantiago.com\/new\/svg-wordpress\/"},"modified":"2024-04-26T12:56:04","modified_gmt":"2024-04-26T10:56:04","slug":"svg-wordpress","status":"publish","type":"post","link":"https:\/\/clientes.ignaciosantiago.com\/new\/svg-wordpress\/","title":{"rendered":"C\u00f3mo SUBIR Im\u00e1genes SVG en WordPress [+PLUGINS]"},"content":{"rendered":"\n

\u00bfConoces las caracter\u00edsticas de los distintos formatos de im\u00e1genes<\/strong> que existen para p\u00e1ginas web<\/a>, blogs<\/a> o tiendas online<\/a>? \u00bfQuieres habilitar las im\u00e1genes SVG en WordPress<\/strong>? \u00bfConoces las ventajas (y desventajas) que tienes los archivos SVG<\/strong>? \u00a1Est\u00e1s en el sitio correcto! WordPress soporta m\u00faltiples formatos de im\u00e1genes (incluyendo JPEG, GIF o PNG<\/a>), sin embargo seguro que has intentado subir una imagen vectorial SVG<\/strong> y te ha saltado el error \u00abLo siento, este tipo de archivo no est\u00e1 permitido por motivos de seguridad\u00bb. No te preocupes, en esta gu\u00eda te explicamos en qu\u00e9 consisten este tipo de archivos y c\u00f3mo subir los arhivos SVG a Wordpress con y sin plugins<\/strong>.<\/p>\n\n\n\n

\"svg<\/figure>\n\n\n\n

Si decides crear una p\u00e1gina web<\/a>, blog<\/a> o tienda online con WordPress<\/a>, ya sea t\u00fa mismo o a trav\u00e9s de dise\u00f1ador web profesional, es imprescindible trabajar con varios elementos generales con los que se crea la arquitectura web, la maquetaci\u00f3n y el aspecto visual de la web. Esos elementos son los textos<\/strong>, las im\u00e1genes<\/strong>, los colores<\/strong> y las tipograf\u00edas<\/strong>. Luego ya puedes echar m\u00e1s madera con otros elementos multimedia, como v\u00eddeos, documentos PDF, etc., pero estos 4 son los pilares fundamentales. De estos pilares, el que m\u00e1s influencia tendr\u00e1 en el resultado visual final son las im\u00e1genes<\/strong>. Por ello, es imperativo apostar por im\u00e1genes de calidad<\/strong>, disponibles en multitud de bancos de im\u00e1genes gratis<\/a> y premium<\/a>.<\/p>\n\n\n\n

Qu\u00e9 es un archivo SVG, c\u00f3mo funciona y para qu\u00e9 sirve<\/h2>\n\n\n\n

A diferencia de los formatos de imagen .PNG, .JPG o .GIF, SVG<\/strong> (o Scalable Vector Graphics<\/a> o Gr\u00e1ficos Vectoriales Escalables) no es un formato de mapa de bits puro<\/strong>. En cambio, es un formato vectorial<\/strong> (un primo cercano al formato de AI de Adobe Illustrator y EPS) que se est\u00e1 convirtiendo en una opci\u00f3n atractiva para todos los dise\u00f1adores y desarrolladores de p\u00e1gina web y UI<\/strong> (user interface o interfaz de usuario).<\/p>\n\n\n\n

\n

Un SVG<\/strong> (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML<\/strong> para gr\u00e1ficos bidimensionales con soporte para interactividad y animaci\u00f3n. La especificaci\u00f3n SVG es un est\u00e1ndar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n

A veces es \u00fatil pensar en el formato SVG como el \u00abHTML para ilustraciones<\/strong>\u00bb y necesitas aplicarlo de manera muy diferente a otros formatos de imagen. Este formato de imagen es el m\u00e1s adecuado, por ejemplo, para mostrar logos, iconos, mapas, banderas y otros gr\u00e1ficos<\/strong> creados en aplicaciones de gr\u00e1ficos vectoriales como Illustrator, Sketch e Inkscape.<\/p>\n\n\n\n

Desarrollado con un marcado basado en XML, los archivos SVG pueden ser editados en cualquier editor de texto<\/strong> y modificado por JavaScript o CSS. Como los vectores pueden ser escalados a cualquier tama\u00f1o mientras conservan la calidad de imagen<\/strong> n\u00edtida, son ideales para el dise\u00f1o responsive<\/strong>. Aunque SVG es un formato vectorial en su n\u00facleo, es posible (incluso com\u00fan) incrustar gr\u00e1ficos de mapa de bits dentro de archivos SVG (por ejemplo JPEG).<\/p>\n\n\n\n

Esto se puede hacer enlaz\u00e1ndolo a una imagen a trav\u00e9s de una URL<\/strong> (como lo haces con tus im\u00e1genes JPG en tu sitio web) o encapsulando el pixel de la imagen <\/strong>como un esquema URI de datos<\/a>. Esto brinda al SVG mucha flexibilidad y posibilidades. Los servicios online como WordPress, Flickr, Medio, Tumblr y Facebook convertir\u00e1n (forzosamente) cualquier archivo SVG a otro formato o, m\u00e1s probablemente, bloqueen directamente su subida. Estos son los usos m\u00e1s habituales de las im\u00e1genes SVG<\/strong>:<\/p>\n\n\n\n