Soy un desarrollador de interfaz de usuario que trabaja en un proyecto. Anteriormente, solía incluir código SVG dentro de HTML, por lo que puedo usar etiquetas de ruta dentro de él para animaciones. Como esto.
<div class="cross-svg"> <svg xmlns="http://www.w3.org/2000/svg" width="28.284" height="28.284" viewBox="0 0 28.284 28.284"> <g id="cross" transform="translate(-298 -432)"> <rect id="Rectangle_32" data-name="Rectangle 32" width="38" height="2" transform="translate(299.414 432) rotate(45)"/> <rect id="Rectangle_33" data-name="Rectangle 33" width="38" height="2" transform="translate(326.284 433.414) rotate(135)"/> </g> </svg> </div>Ahora, me dicen que no es una buena práctica hacer eso. Escribir el código SVG dentro de HTML ayuda a aumentar la longitud del código, lo que afecta directamente al tamaño de construcción. ¿Es verdad? En caso afirmativo, ¿cómo puedo usar la ID dentro de la etiqueta SVG para la animación?
<img src={crossSVG} alt="" />
Importar o pegar, ¿Cuál es mejor?
No, en realidad todo lo contrario. La razón por la que usamos SVG en lugar de imágenes es que SVG se genera con el sitio web y, por lo tanto, no ha hecho que el sitio web sea más lento con la carga y, en cambio, solo se muestra instantáneamente junto con el sitio. Espero que esto haya respondido a su pregunta, pero si no, solo responda a esta e intentaré darle una respuesta más detallada.