¿WebFont, Imagen o SVG?

por lo que puedo entender. si la imagen se carga desde un archivo externo, entonces representa una llamada http extra.

mi pregunta es:
¿yo puedo tener un archivo svg pero si lo cargo desde un archivo externo tiene el mismo impacto que si lo hubiera utilizado en png?

// esto 
<img src="/icono.svg">

// tendría el mismo impacto que esto? 
<img src="/icono.png">

🎨 ¿WebFont, Imagen o SVG?

Una imagen es una matriz dividida en cuadrados cada uno, es la representación de un pixel

SVG o vectores son elementos generados matemáticamente por el navegador

Above the fold primeros 500 a 600 pixeles de la pantalla, es la parte más importante porque es lo primero que ven los usuarios

• Si aplicamos zoom a cada uno
  • Imagen ⇒ Se verán los pixeles
  • Vector ⇒ Mantendrá la calidad

Ventajas

• Son prácticos
• Fáciles de usar y distribuir

Desventajas

• Un recurso más
• HTTP Request
• Bloqueantes
• No son accesibles

Ventajas

• Livianos
• Inline en el HTML
• Accesibilidad
• Animaciones
• Data URI

Desventajas

• Se quita facilidad
• Requiere un diseñador
• Incrementa el largo del HTML ⇒ Puede ser incómodo para el equipo de trabajo, pero para el navegador no

¿Cuándo usarlos?

• Logos (especialmente “Above the fold”)
• Ilustraciones
• Ilustraciones animadas
• En general: gráficos de los que puedas mantener un fácil control

RESUMEN: Tenemos dos opciones las webfonts que son bastantes fáciles y practicas al momento de usarlas, pero implican un recurso más que pedir mediante HTTP, volviéndolo bloqueante a nivel de performance, una alternativa es un SVG que nos da una mejor accesibilidad, pero la desventaja es que puede llegar a ser extenso en HTML, solo afectando un poco a la experiencia de desarrollo

SVG codigo:
https://paste.sh/BLp5k54Q#dvuK8Im4u7OqcujNP7prvFzx

Les dejo este link para que puedan descargar iconos SVG de forma gratuita: https://www.flaticon.com/

Además les dejo este link para descargar Inkscape que es una herramienta gratuita para la edición de archivos SVG: https://inkscape.org/es/

Pueden usar Figma para convertir sus íconos en SVG muy fácil

• Solo lo arrastran, lo sueltan en el app de Figma y luego lo exportan como svg.
• Figma tiene una versión Web por ende no necesitan instalarlo 😀
• Pueden instalar un plugin llamado iconify que tiene muchos íconos SVG ya listos

Diamante en bruto éste curso, y Jonathan lo está puliendo! Un gran curso con mucho énfasis con lo que pasa tras bastidores. Gran profesor!

Les dejo un repo con muchos svg que son de utilidad si vienes de FontAwesome

Si estan trabajando con React, puede usar svg como componentes de react, con esta pagina
https://react-svgr.com/playground/
convertira sus iconos en componentes que pueda importar, y asi no se usa el HTTP, si no que se pone directamente en el codigo y esta web optimiza los SVG
https://jakearchibald.github.io/svgomg/

WebFonts

• Ventajas:
  • Prácticos
  • Fáciles de usar y distribuir
• Desventajas:
  • Bloqueantes
  • HTTP Request
    SVG
• Ventajas
  • Livianos
  • HTML inline
  • Accesibilidad
• Desventajas
  • Requiere diseñador
  • Incrementa el largo del HTML
  • No es tan fácil
  • Recomendación:
    • Logos
    • Ilustraciones
    • Ilustraciones animadas
    • Gráficos en general

Existen muchísimas páginas para obtener SVGs, la que más utilizo es remixicon

Y cuando necesito algo muy específico lo creo utilizando Figma (No soy diseñador, pero no es tan difícil crear algunos íconos 😄)

SVG
Los SVG, junto con los webfonts, son elementos de tipo Vector. Y existe una diferencia importante entre lo que es una imagen, y lo que es un vector.

Una imagen es una matriz que se divide en cuadros, y cada cuadro representa un pixel. Mientras tanto los vectores son figuras generados matemáticamente por el navegador. Esa diferencia es notoria cuando haces bastante Zoom a la imagen comenzará a verse pixelada. Y en el vector nunca se verá pixelada.

Entre los Webfonts y los SVG es importante saber determinar cuando usar uno o el otro. Y para esto requiere analizar las ventajas y desventajas de ambos.

Son muy fáciles de usar y de distribuir en Internet, por ejemplo: La librería mas popular para usar iconos font-awesome utiliza webfonts para distribuirse.

Sin embargo como desventaja, dependiendo como lo cargue, puede ser bloqueante al momento de render del HTML, porque sería un recurso mas a descargar por HTTP que afecta el performance.

Es un formato liviano, ya que es basado en XML que funciona perfectamente dentro del HTML, también permite animaciones porque otorga mucho control en los elementos que lo componen.

Sin embargo como desventaja, no es fácil de trabajarlo porque requieres de un Diseñador para crear los formatos, y en muchas ocasiones, aunque no es un problema para el navegador puede incrementar bastante el HTML si se usa de manera excesiva.

Cuando es perfecto usar SVG?

Es muy bueno usarlo en los logotipos. Cuando los logotipos son gráficas simples y maneja pocos colores, los SVG vienen bien y sobre todo cuando son iconos que están “Above the fold”. Es decir en los primeros 500 o 600 pixeles de la página. Pues son los pixeles mas importantes porque es lo primero que va a ver los usuarios.

SVG también viene bien con ilustraciones y mas si son ilustraciones animadas, gracias a que SVG es HTML puedes controlar los elementos internos de los SVG incluso con Javascript.

En cuanto a usar SVGs o convertirlos en una IconFont, cual seria mejor opción?

Yo le agregué una clase al svg, dejé así los elementos en css para no tener el selector:

<svg class="profile__log" viewBox="0 0 50 50">
            <defs />
            <circle
              cx="25"
              cy="25"
              fill="none"
              r="24"
              stroke="#fff"
              stroke-linecap="round"
              stroke-miterlimit="10"
              stroke-width="2"
            />
            <path fill="none" d="M0 0h50v50H0z" />
            <path
              fill="#fff"
              d="M29.933 35.528c-.146-1.612-.09-2.737-.09-4.21.73-.383 2.038-2.825 2.259-4.888.574-.047 1.479-.607 1.744-2.818.143-1.187-.425-1.855-.771-2.065.934-2.809 2.874-11.499-3.588-12.397-.665-1.168-2.368-1.759-4.581-1.759-8.854.163-9.922 6.686-7.981 14.156-.345.21-.913.878-.771 2.065.266 2.211 1.17 2.771 1.744 2.818.22 2.062 1.58 4.505 2.312 4.888 0 1.473.055 2.598-.091 4.21-1.261 3.39-7.737 3.655-11.473 6.924 3.906 3.933 10.236 6.746 16.916 6.746s14.532-5.274 15.839-6.713c-3.713-3.299-10.204-3.555-11.468-6.957z"
            />
          </svg>

.header__menu--profile .profile__logo {
  margin-right: 8px;
  width: 40px;
}

Dejo algo relacionado, esta web permite convertir un SVG en un componente de react.
https://react-svgr.com/playground/?typescript=true

👌