Como yo trabajo los SVG

Como yo trabajo los SVG

Este es un tema que me ha estado interesando mucho en estos días. Los iconos (SVG). Siempre he trabajado con iconos en las páginas, pero nunca le he dedicado la suficiente atención como para saber qué es y cómo funciona.

Bueno acá te mostraré que he aprendido y como los estoy trabajando en las páginas.

Antes de entender esto me mandaban los SVG y yo simplemente los subía a la página y no les podía cambia el color y a veces hasta el tamaño. Pero eso cambió, ahora lo que hago son los siguientes pasos.

  1. Recibir o bajar iconos.

Si los recibo o bajo lo primero que hago es entrar a mi programa Inkscape (que es lo mismo que el Adobe Illustrator o Corel Draw) y ajusto el contenido del SVG o Icono.

Christian Himmer | Como yo trabajo los SVG 01
  1. Una vez que ajusté el contenido lo abro en el Virtual Studio Code.
Como yo trabajo los SVG 02

En este caso queda con mucha información que agrega el mismo programa (Inkscape) con información que en verdad no es necesario para lo que yo quiero hacer. Todo esto lo selecciono y lo copio.

  1. Abro la página SVGOMG
Como-yo-trabajo-los-SVG-03

En esta página en la parte Paste markup pego lo que copie del Visual Studio Code.

Una vez copiado al lado derecho saldrá la configuración donde tendrás que activar un par de configuraciones.

Como yo trabajo los SVG 04

Todo depende del SVG que estés trabajando no todos son iguales.

Con esto logras bajar mucho el peso de tu SVG

Como yo trabajo los SVG 05.webp

Al final haces click en el botón copiar (el del símbolo de dos hojitas)

  1. Vuelves a Visual Studio Code

Aquí pegas el código nuevo.

Como yo trabajo los SVG 06.webp

Si te fijas ahora tiene mucho menos código. (Si quieres verlo más ordenado puedes apretar las teclas alt+z).

Lo que yo más me fijo es en los códigos que empiezan con <path … Esas son las líneas o secciones de tu SVG.

Si tienes un solo <path … puedes dejarlo en blanco (quitarle el fill=”#fff” en este caso) y con Elementor puedes asignarle un color que quieras.

En el caso de tener 2 o más <path (como lo tengo en este ejemplo) yo personalmente le inserto una clase.

Como yo trabajo los SVG 07

En este caso le di la clase fondo y estrella, pero tú le puedes poner lo que tú quieras.

Luego de subir el SVG lo agregas y vas al “Custom CSS” y dejas este código.

				
					.estrella {
		fill: black;
		stroke: white;
		stroke-width: 7;
}

.fondo {
		fill: purple;
		stroke: yellow;
		stroke-width: 7;
}
				
			

Si no tienes Elementor pro no vas a poder utilizar “Custom CSS”, no importa puedes dejar el CSS en WordPress, Apariencia – Personalizar.

Como yo trabajo los SVG 08

y luego en CSS adicional.

Como yo trabajo los SVG 09

En todo caso te recomiendo 100% Elementor Pro ya que te ahorras muchos plugins externos y obtendrás muchas herramientas nuevas adicionales. Si quieres saber más puedes leer mi artículo acerca de Elementor Pro.

  1. Otra cosa que hago yo para ocupar los colores globales de la página puedes hacer esto en el CSS.

Abre la hoja en una pestaña nueva para revisar el código (Inspeccionar)

Como yo trabajo los SVG 10.webp

Buscas los colores globales dentro del código. En mi caso se llama elementor-kit-15 (puede que tu número sea distinto, pero elementor-kit sigue igual)

Como yo trabajo los SVG 11

Con esto puedes cambiar el color y dejarlo globalizado.

				
					.estrella {
    fill: var(--e-global-color-6965181);
    stroke: var(--e-global-color-secondary);
    stroke-width: 7;
}

.fondo {
    fill: var(--e-global-color-649264c);
    stroke: var(--e-global-color-primary);
    stroke-width: 7;
}
				
			

Espero que todo esto te ayude a entender mejor los SVG ya que para mí ha sido algo muy entretenido de entender.

Cualquier duda que tengas contáctame y feliz te ayudo en lo que pueda.

Contenido

Aquí tienes otros artículos que te puedan interesar. - -

Cambia el tamaño de imágenes en lotes de forma rápida y sencilla con BulkResizePhotos, una ...
iloveimg.com: La Herramienta Esencial para Diseñadores Web. Simplifica la edición de imágenes en línea: redimensiona, ...
Descubre cómo crear sitios web profesionales sin programar con Elementor Gratis y conoce todo sobre ...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *