{"id":2071,"date":"2021-04-09T09:01:03","date_gmt":"2021-04-09T12:01:03","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=2071"},"modified":"2025-03-01T21:40:29","modified_gmt":"2025-03-02T00:40:29","slug":"freebies-del-mes-herramientas-svg","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/freebies-del-mes-herramientas-svg\/","title":{"rendered":"Freebies del mes: herramientas SVG"},"content":{"rendered":"
<\/div>

En este post, dentro de la categor\u00eda que llamaremos Freebies del mes<\/strong> \u2013porque bueno, no se me ocurri\u00f3 otro nombre \ud83d\ude02\u2013 les voy a comentar 3 herramientas gratuitas de una misma tem\u00e1tica que les ser\u00e1 muy \u00fatil su trabajo diario.<\/p>\n

En esta edici\u00f3n, teste\u00e9 estas tres herramientas para creaci\u00f3n y edici\u00f3n de archivos SVG. Este tipo de archivo de vectores para web tiene dos ventajas:<\/p>\n

\u2705 Es muy liviano, ideal para ahorrar muchos Kb si buscamos optimizar tiempos de carga en una web.
\n\u2705 Es escalable, por lo que nuestro dibujo, logo o background nunca perder\u00e1 nitidez al cambiar de tama\u00f1o.<\/p>\n

Es cierto que podemos generarlos y manipularlos con herramientas como Illustrator o Corel. Sin embargo, estas herramientas puntuales nos ahorrar\u00e1n mucho tiempo, sobre todo si no tenemos el Illustrator instalado o no sabemos bien c\u00f3mo usarlo.<\/p>

\"Neolo<\/a><\/div><\/div>\n

Y ahora s\u00ed, vamos con los protagonistas:<\/p>\n

.<\/span><\/p>\n

1- SVG Backgrounds<\/h3>\n

Es incre\u00edble lo que se genera a trav\u00e9s de SVG Backgrounds<\/a><\/strong>. Crea un background para web, con distintas formas y gradients, \u00a1y de poqu\u00edsimo peso! Apenas verla, me enamor\u00f3.<\/p>\n

\"SVG<\/p>\n

Hay distintas variantes para elegir, se puede modificar el color de fondo, tama\u00f1o de la forma, etc. Luego de editar a gusto, se puede descargar en formato SVG o bien usar el c\u00f3digo CSS generado. Si bien son varios motivos, cuyo uso requiere atribuci\u00f3n, existe tambi\u00e9n un paquete Premium con la colecci\u00f3n completa.<\/p>\n

.<\/span><\/p>\n

2- Editor de SVG en l\u00ednea<\/h3>\n

Method Draw<\/strong><\/a> es un editor SVG de c\u00f3digo abierto que corre desde un sitio web. Para usarlo no es necesario abrir cuenta ni loguearse. La interfase es bastante simple e intuitiva. Nos permite dibujar trazos y curvas, incorporar formas b\u00e1sicas, o bien importar nuestro propio SVG para editar.<\/p>\n

\"Method<\/p>\n

Como podr\u00e1n ver, import\u00e9 mi propio logo para armar la marca al agua que ver\u00e1n en un costado. Me gusta que no requiera registrarse ni nada por el estilo, simplemente abrir y usar. Adem\u00e1s, si cerr\u00e1s y volv\u00e9s a abrir un tiempo despu\u00e9s, ver\u00e1s el \u00faltimo dibujo con el que estuviste trabajando. Es totalmente gratuito, pero se aceptan donaciones. Su autor, Mark MacKay<\/strong>, a\u00fan sigue trabajando en mejorar el c\u00f3digo, y podemos leer los avances en su diario de trabajo (en ingl\u00e9s) aqu\u00ed: method.ac\/writing\/<\/a><\/p>\n

.<\/span><\/p>\n

3-\u00a0 Patterns geom\u00e9tricos en minutos<\/h3>\n

Pattern Pad<\/strong><\/a> me pareci\u00f3 sumamente \u00fatil, pues te permite crear patterns (patrones) geom\u00e9tricos en pocos minutos, con un gran nivel de detalle. Lo que antes pod\u00eda llevar un par de horas de trabajo, con esta herramienta podr\u00e1s generarlo r\u00e1pidamente.<\/p>\n

\"Pattern<\/p>\n

Usando los ejemplos de base, se puede personalizar cambiando colores, espacios, tama\u00f1o de las formas, repetici\u00f3n, y m\u00e1s. Una vez listo, descargamos nuestro \u00abdise\u00f1o\u00bb en formato SVG, PNG, o JPG. Lo genial, es que es totalmente gratis y no exige atribuci\u00f3n, aunque siempre es bienvenida.
\n\u00bfConoc\u00edas estas herramientas? \u00bfTen\u00e9s otra para sugerir? Pod\u00e9s dejar el link en los comentarios. \u00a1Gracias por leer y difundir esta nota!<\/p>\n

 <\/p>\n

Te puede interesar:<\/em>
\nFreebies del mes: 5 generadores CSS><\/a><\/strong><\/em><\/div>\n
\u0421ollaborator<\/a><\/div><\/div>