CODEWITHSUNDEEP
svg
AyKarsi
AyKarsi

Reputation: 9675

SVG: Huge path versus many line tags

I am drawing a grid which can easily consists of 600+ vertical and horizontal lines.

Right now I am generating/drawing each grid with a separate tag.

Can I expect better performance if I generate the lines using on huge path statement. Something like this:

<path class="vertical half notLoaded" d="M -4256.849999999999 0  v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00 v 950.00 m 52.26 -950.00"></path>

I can't see a difference on my core i7 with a decent grafik card. Would less performant-setups benefit from this setup?

Upvotes: 1

Views: 1146

Answers (1)

Alvin K.
Alvin K.

Reputation: 4379

An example of <pattern> for SVG. Beats drawing 600+ lines. Draw a box with a crosshair, tile it with fill

Edit: Crosshair is optional. That's just asthetics. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000" height="1000" viewBox="0 0 1000 1000" 
	 xml:space="preserve">
  <defs>
    <pattern id="squarePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="0 0 20 20" >
        <rect id="box" x="0" y="0" width="20" height="20" fill="none" stroke="#6185af" stroke-width="1" />
        <path d="M0,10 L20,10 M10,0 L10,20" stroke="#330066" stroke-width="1" />
    </pattern> 
  </defs>
  <rect id="gridlines" x="0" y="0" width="1000" height="1000" fill="url(#squarePattern)" />
</svg>

Upvotes: 3

Related Questions