[et_pb_section admin_label=”section” transparent_background=”off” background_color=”#ffffff” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off” custom_padding=”0px||0px|”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_padding=”||0px|” padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on”][et_pb_column type=”4_4″][et_pb_text admin_label=”TUTORIAL” background_layout=”light” text_orientation=”center” text_font=”PT Sans|on|||” text_text_color=”#bcbcbc” use_border_color=”off” border_color=”#ffffff” border_style=”solid” text_letter_spacing=”2px” custom_margin=”||0px|” custom_padding=”||0px|”]
TUTORIAL
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”center” max_width=”660px” text_font=”PT Sans||||” text_font_size=”72″ text_text_color=”#1d1d1d” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”18px||80px|” text_line_height=”1.1em” text_font_size_last_edited=”on|desktop” text_font_size_tablet=”52″]
Cómo usar e insertar imágenes en formato SVG en WordPress
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”#f7f7f4″ allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off” custom_padding=”0px|||”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” use_custom_gutter=”off” custom_padding=”0px|||” padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”off” column_padding_mobile=”on” custom_width_px=”620px”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” max_width=”620px” text_font=”PT Serif||||” text_font_size=”20″ text_text_color=”#363636″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”40px||0px|” text_line_height=”1.4em” text_font_size_last_edited=”on|desktop”]
Si quieres aprender a utilizar el formato SVG en tu WordPress de forma rápida y sencilla. A continuación te dejo está guía que estoy seguro que te podrá ayudar. En esta guía te contaré sobre 2 alternativas para habilitar el SVG en WordPress. La primera será a través de un Plugin y la segunda es a través de la edición del function.php
Que es el formato SVG
En palabras sencillas es el SVG (Scalable Vector Graphics) es una imagen basada en vectores. Donde una de sus mayores ventajas es que no importará el tamaño del ordenador o smartphone tus imágenes siempre, pero siempre, se verán en una muy buena calidad.
Sus ventajas
- Las imágenes en SVG son responsive
- Pesan muy poco
- Pueden ser animadas como un GIF
[/et_pb_text][et_pb_text admin_label=”Pero ¿Cómo” background_layout=”light” text_orientation=”justified” max_width=”620px” text_font=”PT Serif||||” text_font_size=”20″ text_text_color=”#363636″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”30px||10px|” text_line_height=”1.5em” text_font_size_last_edited=”on|tablet”]
Pero ¿Cómo es un SVG por detrás?
[/et_pb_text][et_pb_text admin_label=”Pero ¿Cómo” background_layout=”light” text_orientation=”justified” max_width=”620px” text_font=”PT Serif||||” text_font_size=”20″ text_text_color=”#363636″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”30px||0px|” text_line_height=”1.5em” text_font_size_last_edited=”on|tablet”]
Plugin para WordPress
Una de las formas más fáciles de utilizar el formato en SVG en WordPress es instalando un plugin.
El que yo te recomiendo es el SVG Support Una vez que lo tengas instalado, simplemente debes subir tus imágenes en formato en SVG como si se tratará de cualquier otro formato.
No puede ser más fácil.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” use_custom_gutter=”off” custom_padding=”0px|||” padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”off” column_padding_mobile=”on” custom_width_px=”620px”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” max_width=”620px” text_font=”PT Serif||||” text_font_size=”20″ text_text_color=”#363636″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”46px||0px|” text_line_height=”1.5em” text_font_size_last_edited=”on|tablet”]
Editando el Function.php
Si sabes de que estoy hablando, puedes seguir adelante, pero si no. Mejor instala el plugin y así te evitas problemas.
Como ya sabrás tendrás que irte a Apariencia -> Editor -> function.php para luego ingresar el siguiente código:
// Para usar SVG en WordPress
add_filter('upload_mimes', 'activar_svg');
function activar_svg($mimes = array()) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
Con esto ya podrás utilizar las imágenes en formato SVG.
IMPORTANTE
Tal vez no lo sabes, pero las imágenes en formato SVG generalmente se exportan desde Illustrator. Donde tienes dos opciones: guardarla en formato .SVG o copiar el código que esa imagen para pegarla.
Después de varios intentos fallidos, logré dar con la solución al problema de no poder mostrar los códigos SVG en WordPress.
Resulta que WordPress lee sólo los códigos SVG que estén en linea. Para ello, necesitarás utilizar la herramienta Svgomg en dónde simplemente tienes que subir tu imagen en formato SVG y de forma automática te comprimirá el archivo, pero además te dará el código lineal para pegarlo en WordPress.
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” max_width=”620px” text_font=”PT Serif||||” text_font_size=”20″ text_text_color=”#363636″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”46px||0px|” text_line_height=”1.5em” text_font_size_last_edited=”on|tablet”]
Agregar un espacio entre SVGs
Si estás trabajando con iconos SVG y deseas que entre cada ícono quede un espacio, podrías probar con el siguiente código HTML:
Insertar un link en SVG
Si deseas que tu SVG sea clickeable deberás agregar la siguiente código:
AQUI DEBES INSERTAR EL CÓDIGO SVG
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” use_custom_gutter=”off” custom_padding=”50px|||” padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on” custom_width_px=”620px”][et_pb_column type=”4_4″][et_pb_divider admin_label=”Divider” color=”#aeaeac” show_divider=”on” divider_style=”solid” divider_position=”top” hide_on_mobile=”off”]
[/et_pb_divider][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”center” text_font=”PT Serif||||” text_font_size=”32″ text_text_color=”#363636″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_margin=”16px||30px|” text_line_height=”1.3em” text_font_size_last_edited=”on|tablet” max_width=”900px”]
NOTA: Si quieres darle una dimensión exacta a tu imagen debes incorporar este código: width=”300px” height=”300px” donde el “300” lo puedes cambiar por el tamaño que necesites.
[/et_pb_text][et_pb_divider admin_label=”Divider” color=”#aeaeac” show_divider=”on” divider_style=”solid” divider_position=”top” hide_on_mobile=”off”]
[/et_pb_divider][/et_pb_column][/et_pb_row][/et_pb_section]
