¿Hay algún lugar donde pueda cargar un ícono y obtener un vector de cadena SVG?
Además, ¿cuáles son esas etiquetas en el código a continuación? <g> <path> y viewBox , data-original , xmlns , d ¿son las etiquetas?
Últimamente, ¿vale la pena usar SVG en lugar de íconos regulares para el rendimiento?
<svg viewBox="0 0 512 512"> <g xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1" /> </g> </svg>Aquí hay una muy buena guía para usar SVG con reaccionar. https://www.sanity.io/guides/import-svg-files-in-react
Hay muchos convertidores en línea que puede usar para crear svg, por ejemplo, https://www.pngtosvg.com/
<g> se utiliza para agrupar formas SVG.<path> indica que el vector a dibujar es una ruta. Alternativamente, podría ser una polilínea o una forma, por ejemplo, un círculo .<viewBox> es una lista de cuatro valores: min-x , min-y , ancho y altoxmlns es el espacio de nombres XML que se necesita para usar la DTD correcta - Declaración de tipo de documento<d> define la ruta que se dibujará.Desde mi experiencia, SVG funciona significativamente más rápido cuando se usan SVG en línea. El principal elemento de bloqueo para la carga de páginas es la gran cantidad de archivos que se cargan secuencialmente. El uso de svg en línea carga todas las imágenes dentro del archivo de la página.
El principal beneficio de los SVG es la escalabilidad del vector sobre el ráster al hacer zoom o ver en diferentes resoluciones.