En este tutorial aprenderás a convertir una imagen en un gráfico vectorial utilizando Inkscape, y luego cómo incorporar ese vector en un proyecto web utilizando HTML y CSS. Te mostraremos cómo exportar la imagen vectorizada en formato SVG, cómo modificar el color de sus elementos directamente desde el archivo SVG y cómo controlar esos colores dinámicamente con CSS. Esta técnica es perfecta para aquellos que deseen crear gráficos escalables y personalizables para sus sitios web o proyectos de diseño sin perder calidad visual.
EJEMPLO DE IMAGEN VECTORIZADA EDITABLE:
CAMBIAR COLOR DE LAS LETRAS: SELECCIONE EL COLOR:Programas necesarios:
Para vectorizar una imagen y modificar el color de sus vectores utilizaremos los siguientes programas:
- Inkscape
- Editor de texto, en este caso: Visual Studio Code
Pasos para vectorizar una imagen utilizando el programa Inkscape.
1.- Lo primero que necesitamos es una imagen para vectorizar, en este caso yo escribí unas letras en un documento en blanco de paint.
2.- Abrimos el programa inkscape y cargamos la imagen la cual queremos vectorizar. Para abrir la imagen hacemos click en archivo, abrir y seleccionamos la imagen.
Al seleccionar la imagen y abrirla , nos aparecerá la siguiente ventana, le damos click en ok.
3.- Nos dirigimos a la barra de herramientas y buscamos cubo de pintura.
4.- Una vez seleccionado el cubo de pintura, seleccionamos cualquier color de la paleta de colores que esta ubicada en la parte inferior y pintamos los elementos a vectorizar.
Si están vectorizando una imagen que contenga letras como en este caso, les recomiendo pintarlas en orden, de izquierda a derecha.
5.- Nos dirigimos nuevamente a la barra de herramientas y seleccionamos la herramienta: seleccionar y transformar objetos.
6.- Seleccionamos la capa del fondo y la eliminamos
Ahora ya tenemos vectorizada nuestra imagen.
7.- Guardamos el documento con el formato svg.
EDITAR LOS COLORES DE NUESTRO ELEMENTO SVG
Modificar el color del los vectores utilizando el atributo style en HTML
1.- Abrimos nuestro editor de texto y abrimos el archivo .svg
Para poder visualizar el svg y los cambios que le vayamos haciendo, abrimos el archivo .svg con cualquier navegador, en este caso yo use chrome.
El archivo svg se nos abrirá en una ventana nueva, aquí podremos visualizar los cambios que realicemos en el editor de código.
2.- Para modificar el color de un elemento de nuestro archivo svg, cambiamos el valor de la propiedad fill que se encuentra dentro del atributo style.
Cada uno de los vectores se encuentra dentro de la etiqueta <path></path>, como yo pinte las letras de mi svg en orden en el programa Inkscape, los vectores también están ordenados.
En este ejemplo le voy a cambiar el color del primer vector (letra A) le voy a poner un color rojo.
Resultado:
Modificar el color del los vectores utilizando css
Para editar los colores de los vectores con css hacemos lo siguiente:
1.- Creamos un archivo de html, agregamos la estructura de html5 , copiamos el código de nuestro archivo .svg y lo pegamos dentro de las etiquetas <body></body>.
2.- Agregamos una clase con el mismo nombre, a cada uno de los vectores. Yo les puse la clase svg-elem, este nombre lo pueden remplazar por cualquier otro nombre.
3.- Eliminamos el atributo style y sus propiedades del la etiqueta <path></path>
4.- Añadimos la etiqueta <style></style> después de la etiqueta <body> de la siguiente manera.
5.- Para poder visualizar los cambios que hacemos en el documento tendremos que abrir este documento (.html) con cualquier navegador, al igual que hicimos con el archivo .svg.
Modificar el color de los vectores utilizando el atributo class.
1.- Agregamos el nombre de la clase que le pusimos a los vectores de nuestro archivo svg precedido de un punto, dentro de nuestra etiqueta style.
2.- Agregamos dentro de .svg-elemen{, la propiedad fill y le asignamos un color.
Resultado:
Como a todos los vectores les puse el mismo nombre en el atributo class, todos los vectores cambian de color.
Para cambiarle el color a un vector individualmente, le cambiamos el nombre de su atributo class. Ejemplo.
Voy a modificar el valor del atributo class del vector numero dos (letra N) y le voy a dar un color rojo.
Resultado:
Modificar el color de los vectores utilizando el atributo id.
* Agregamos el nombre del id del vector que queramos modificar precedido de un #(El id deve ser diferente para cada uno de los vectores, no podemos usar u solo idd para todos), dentro de nuestra etiqueta style (El id nos viene dado automáticamente por el programa Inkscape). Ejemplo:
Voy a modificar el color del vector numero 3 (letra I), le voy a dar un color azul.
Resultado:
CODIGO DE ESTE PROYECTO:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><style type="text/css">.svg-elem{fill:greenyellow;}.svg-elem1{fill:red;}#path288{fill:blue;}</style><svgversion="1.1"id="svg9"width="100%"height="84"viewBox="0 0 545 84"sodipodi:docname="Anim svg1.svg"inkscape:version="1.1 (c68e22c387, 2021-05-23)"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"xmlns="http://www.w3.org/2000/svg"xmlns:svg="http://www.w3.org/2000/svg"><defsid="defs13" /><sodipodi:namedviewid="namedview11"pagecolor="#ffffff"bordercolor="#666666"borderopacity="1.0"inkscape:pageshadow="2"inkscape:pageopacity="0.0"inkscape:pagecheckerboard="0"showgrid="false"inkscape:zoom="0.95229358"inkscape:cx="272.5"inkscape:cy="42.003854"inkscape:window-width="1024"inkscape:window-height="706"inkscape:window-x="-8"inkscape:window-y="-8"inkscape:window-maximized="1"inkscape:current-layer="g15" /><ginkscape:groupmode="layer"inkscape:label="Image"id="g15"><pathd="M 4.8486739,67.46869 C 6.8598128,62.415101 11.130526,51.192197 14.339146,42.528902 17.547766,33.865607 21.694384,22.760838 23.553853,17.851638 L 26.934705,8.9258189 37.357044,8.6466844 47.779383,8.3675499 55.108581,27.02337 c 4.03106,10.260702 8.340458,21.727353 9.576442,25.481447 1.235983,3.754094 3.7265,10.595194 5.534481,15.202444 1.807982,4.60725 3.28724,8.523465 3.28724,8.702701 0,0.179235 -4.30675,0.190014 -9.570554,0.02395 l -9.570555,-0.30193 -2.06536,-5.543747 -2.06536,-5.543745 -13.217979,0.293264 C 22.322564,65.663778 23.532444,65.002146 21.598821,73.769268 l -0.636907,2.887765 H 11.076985 1.1920576 Z M 46.204239,50.717463 c 0,-0.128731 -0.887522,-2.732633 -1.97227,-5.786452 -1.084748,-3.053819 -2.791125,-8.742066 -3.791947,-12.640549 -1.986202,-7.736805 -4.103797,-9.210193 -5.314529,-3.697762 -0.40956,1.864713 -2.095311,7.417098 -3.746114,12.338632 -1.650802,4.921534 -3.007156,9.276149 -3.014118,9.676923 -0.007,0.400773 4.003959,0.64196 8.913159,0.535971 4.9092,-0.105989 8.925819,-0.298033 8.925819,-0.426763 z"id="path210"class = "svg-elem"/><pathd="M 82.957611,42.528902 V 8.4007707 l 9.188343,0.051071 9.188346,0.051071 10.50096,15.7420453 c 14.85694,22.272113 14.56624,21.874217 16.01397,21.91883 1.00298,0.03091 1.31262,-4.418388 1.31262,-18.861284 V 8.4007707 h 8.92582 8.92582 V 42.528902 76.657033 l -9.18835,-0.0232 -9.18834,-0.0232 -5.09417,-8.115048 c -8.91455,-14.200919 -20.06308,-29.623509 -21.42076,-29.632922 -1.00182,-0.0069 -1.31262,4.466457 -1.31262,18.892634 v 18.901734 h -8.92582 -8.925819 z"id="path249"class = "svg-elem1"/><pathd="M 163.81503,42.528902 V 8.4007707 h 9.45087 9.45086 V 42.528902 76.657033 h -9.45086 -9.45087 z"id="path288"class = "svg-elem"/><pathd="M 200.5684,42.528902 V 8.4007707 h 12.56068 12.56068 l 1.13969,4.4629093 c 0.62683,2.4546 1.5863,5.644268 2.13216,7.08815 0.54585,1.443883 1.66392,6.191175 2.48459,10.54954 2.16421,11.493563 4.79018,19.903254 6.2149,19.903254 1.05083,0 4.55327,-11.746185 11.19385,-37.540944 l 1.14893,-4.4629093 h 12.56068 12.56068 V 42.528902 76.657033 h -7.35067 -7.35068 V 50.991646 c 0,-32.603828 -1.41768,-34.819177 -6.75958,-10.562937 -1.52632,6.930636 -4.25064,17.917269 -6.05404,24.41474 l -3.2789,11.813584 h -7.0374 -7.03741 l -0.61346,-4.46291 c -0.53243,-3.873375 -5.97463,-25.325883 -10.78898,-42.528901 -0.84857,-3.032154 -2.00219,-5.513006 -2.56361,-5.513006 -0.63373,0 -1.02076,9.953822 -1.02076,26.252408 v 26.252409 h -7.35067 -7.35068 z"id="path327"class = "svg-elem"/><pathd="m 333.34698,74.676418 c -5.47366,-2.486215 -11.48362,-9.523648 -12.9006,-15.106129 -0.61042,-2.404853 -1.01584,-4.440004 -0.90095,-4.522559 0.1149,-0.08255 4.07641,-0.435031 8.80336,-0.783279 l 8.59446,-0.633181 1.23391,3.738782 c 1.46995,4.453982 5.84097,6.685825 13.09407,6.685825 3.70349,0 5.39855,-0.591659 7.3844,-2.577509 1.41763,-1.41763 2.57751,-3.344154 2.57751,-4.281163 0,-2.851566 -5.69643,-7.60364 -10.59755,-8.84069 -22.46239,-5.66953 -28.25601,-10.190451 -28.25601,-22.048933 0,-4.631581 0.48734,-5.839038 3.86623,-9.57906 5.49573,-6.083116 10.76194,-8.4493562 20.25224,-9.0998358 11.34789,-0.7778022 19.08816,1.5898629 24.87054,7.6076368 3.65587,3.804701 6.772,10.359891 5.4534,11.471935 -0.19935,0.168122 -4.20109,0.612942 -8.89277,0.98849 l -8.53031,0.682814 -1.34707,-3.252109 c -1.51158,-3.64929 -4.55051,-5.175623 -10.30466,-5.175623 -7.35354,0 -11.28678,5.578916 -6.20335,8.798841 1.2995,0.82312 6.37934,2.492831 11.28854,3.71047 16.84303,4.17761 24.46725,9.381426 25.68985,17.534295 1.64157,10.946823 -2.53626,19.10447 -12.26765,23.953826 -4.86711,2.42538 -6.64432,2.705366 -17.04119,2.684709 -8.99798,-0.01788 -12.56486,-0.457951 -15.8664,-1.957553 z"id="path366"class = "svg-elem"/><pathd="m 410.49108,73.769268 c -0.60208,-1.588271 -3.14677,-8.085742 -5.65487,-14.438825 -2.5081,-6.353083 -5.59135,-14.622591 -6.85166,-18.376686 -1.26031,-3.754094 -4.37444,-12.15674 -6.92029,-18.672548 -2.54584,-6.515807 -4.62881,-12.3044628 -4.62881,-12.86368 0,-0.5793652 4.01588,-1.0167583 9.33525,-1.0167583 h 9.33525 l 7.38088,22.8395953 c 4.05948,12.561778 7.53745,23.745524 7.72881,24.852771 0.82103,4.750463 2.81617,2.081217 5.99883,-8.02569 1.8686,-5.933965 5.41804,-17.168362 7.88763,-24.965328 l 4.49018,-14.1763001 9.59247,-0.3015013 9.59248,-0.3015011 -2.56693,6.6020795 c -8.41261,21.636981 -14.16844,37.109599 -14.15904,38.061777 0.006,0.601309 -2.00237,6.172129 -4.46291,12.3796 l -4.47371,11.286313 -10.26443,0.0022 c -10.23293,0.0022 -10.26779,-0.0066 -11.35913,-2.885523 z"id="path405"class = "svg-elem" /><pathd="m 483.28935,74.577288 c -6.33506,-2.875433 -14.04596,-11.296752 -16.52795,-18.050693 -3.1927,-8.687885 -2.81745,-21.635343 0.85892,-29.635683 6.44149,-14.017693 19.77833,-20.7230549 38.13194,-19.1716062 8.78893,0.7429367 14.36689,2.7423602 18.38353,6.5895872 2.99591,2.869561 6.88193,10.524385 5.86102,11.545287 -0.34675,0.346752 -4.24173,1.150715 -8.65552,1.786585 -7.67647,1.105907 -8.10096,1.057591 -9.77229,-1.112286 -5.53851,-7.190612 -20.93125,-5.382482 -25.85255,3.036804 -2.83359,4.847664 -2.94086,19.628147 -0.1833,25.255834 3.53998,7.224473 13.41816,9.933591 24.29008,6.661625 5.45524,-1.641788 6.78302,-2.931949 6.80809,-6.615208 0.0152,-2.226736 -0.40697,-2.362717 -7.3346,-2.362717 h -7.35067 v -7.350674 -7.350675 h 15.2264 15.22639 l -0.0271,13.913777 -0.0271,13.913776 -5.12797,3.477436 c -8.94905,6.068636 -14.39593,7.551402 -27.64465,7.525514 -9.39588,-0.01836 -12.71585,-0.437709 -16.28272,-2.056683 z"id="path444"class = "svg-elem"/></g></svg></body></html>
Si quieren que explique como funciona el selector de color que esta al inicio de este post déjenme un comentario, y con gusto les explico.
Mira como animar el SVG aqui:▷ ANIMAR UN SVG CON GSAP
Publicar un comentario