18

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?

5
  • 2
    El peso del SVG, y el costo de procesamiento para el DOMParser del browser está determinado por la candidad de nodos. Usar un path puede verse más críptico cuando una persona mira el SVG, pero son menos nodos y por tanto más barato de procesar
    – ffflabs
    Commented el 3 ago. 2018 a las 13:12
  • 4
    la principal diferencia es que line es una recta, en cambio usando path la linea puede curvarse usando puntos de control de curvas bezier Commented el 1 sept. 2018 a las 17:24
  • Personalmente prefiero utilizar <path> siempre que pueda. A continuación dos citas del libro "Using SVG with CSS3 and HTML5" "Las demás formas geométricas, <polygon> y <polyline> son una forma conveniente (o abreviada) de utilizar unos paths que contienen solo segmentos de línea recta". "Cuando el SVG era todavía en etapa de desarrollo, probaron toda clase de maneras de representar los paths, incluso una donde cada punto o segmento de curva del trazado era un elemento XML individual. Esto se demostró a ser más bien ineficiente comparado con utilizar una cadena de comandos"
    – enxaneta
    Commented el 4 sept. 2018 a las 15:54
  • Como lo mencionaron anteriormente, tiene que definir el inicio y el final de cada línea. Ya lo había mencionado y path le genera más opciones con las líneas. por lo que sé, se puede deformar una línea con path, incluso darle grosor a las líneas. Commented el 25 abr. 2021 a las 13:50
  • La gran diferencia, es que con path dibujas a partir de (coordenadas) y con esto podrás crear cualquier forma, uno de sus fuertes son las curvas por ejemplo. En ese aspecto el line es mas limitado pero va al grano con líneas. Ya se que suena obvio, pero a partir de la base vuelve a analizar el código como cualquier otro lenguaje. Dependerá claro de lo que quieres dibujar.
    – Rafaell
    Commented el 3 jun. 2022 a las 7:04

3 respuestas 3

0

En el ejemplo de path que pusiste esta faltando una L o l.

Debe ser primero una M para ubicar el punto de inicio de la linea, y luego una L con las coordenadas del punto final o l con la distancia del punto final.

<path d="M10,10 L 290,290 M290,10 L 10,290" />

El path te da mas opciones, definitivamente, ya que con el puedes trazar curvas.

En cuanto a velocidad, si son lineas desconectadas, debe ser similar. El mayor beneficio del path es para cuando se trata de lineas conectadas, ya que hay que parsear menos parámetros.

0
0

puedes utilizar para optimizar tu código def, si utilizas las mismas líneas y las desplazas

<defs>
  <g id="mi_linea">
    <line x1="10" y1="10" x2="290" y2="290" />

  </g>
</defs>
<use x="30" xlink:href="#mi_linea"/>
0

aunque podrias hacer una sola linea y usar para crear copias con pequeñas variaciones con transform como una rotacion en (90 145 145) se consigue lo mismo:

<svg viewBox="00 00 1900 1900">
  <line id="L1" x1="10" y1="10" x2="400" y2="400" stroke="#000" stroke-width="5" />
  <use xlink:href="#L1" transform="rotate(90 200 200)" stroke="#F00"/> 
</svg>

1
  • Esto aplicaría a ambos métodos por igual, por lo que no es una ventaja de uno sobre el otro.
    – Alvaro Montoro
    Commented el 19 feb. 2023 a las 22:58

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.