Estoy trabajando en un SVG que va a tener muchas líneas dentro. Inicialmente estaba haciendo algo como esto usando un line
por cada línea:
line {
stroke: black;
stroke-width: 10;
stroke-linecap: round;
}
<svg width="150" height="150" viewBox="0 0 300 300">
<line x1="10" y1="10" x2="290" y2="290" />
<line x1="290" y1="10" x2="10" y2="290" />
</svg>
Pero me encuentro con que el número de líneas puede ser muy elevado (varios cientos) y entonces el tamaño del SVG crece considerablemente. En la definición de SVG2 se hace mención a cómo un line
puede mapearse a un path
equivalente de forma sencilla, así que hice eso en su lugar:
path {
stroke: black;
stroke-width: 10;
stroke-linecap: round;
}
<svg width="150" height="150" viewBox="0 0 300 300">
<path d="M10,10 290,290 M290,10 10,290" />
</svg>
Usando path
para dibujar una línea necesito un ~50% menos de código que usando un line
para dibujar una línea, por lo que seguramente opte por este método.
Aparte del problema de tener líneas de diferentes colores (que se puede solucionar fácilmente teniendo un path
para cada color), ¿existe alguna diferencia entre usar path
o line
para dibujar una línea? ¿Alguna de las dos se procesa más rápido, es más eficiente, o dará más opciones/problemas que la otra?
line
es una recta, en cambio usandopath
la linea puede curvarse usando puntos de control de curvas bezier