14: Sistema de iconos SVG - Construyendo Defs - Trucos CSS

Anonim

El elemento está aferrado a toda esta idea de un sistema de iconos SVG en línea. Aprendimos que una forma limpia de hacerlo es poner todo lo que pretendes dibujar más tarde en un bloque para que no se procese y podamos hacer referencia a ellos más tarde (diles que el navegador dibuje ese icono).

En este video vamos a dedicar un tiempo a construir nuestro propio bloque a mano. No es particularmente difícil y, creo, explica cómo funciona todo esto.

Lo vamos a hacer a partir de SVG que encontramos en diferentes lugares de la web. Tomamos uno de The Noun Project, uno de IcoMoon y uno de Shutterstock. Hacemos nuestra debida diligencia para abrir el SVG, arreglando cualquier forma extraña, ajustando el tamaño del lienzo y todo eso. Aquí no hay límite de dónde puede provenir esta información vectorial. Estas tres fuentes son solo para mostrarle que SVG puede provenir de cualquier vector.

Más adelante, con suerte, simplificaremos este proceso, pero comprender los aspectos básicos de cómo funciona siempre es útil. Nunca se sabe cuándo necesitará profundizar (por ejemplo, para averiguar por qué algo no funciona bien).