I'm using React to load SVG files to a page. I have two solutions for this:

1. Write the SVG's into the page. I've been told this is faster, but it's getting awfully messy

<svg>
  <path d="awfully long data"/>
</svg>

I'm using React to load SVG files to a page. I have two solutions for this:

1. Write the SVG's into the page. I've been told this is faster, but it's getting awfully messy

<svg>
  <path d="awfully long data"/>
</svg>

2. Have a separate .svg file for the svg's and load them using

<svg>
  <use xlinkHref="path/to/svg.svg#symbolid" />
</svg>

I'm here to ask which is faster? is it even significant? and will it have much of an effect when used alongside React?

• javascript
• reactjs
• svg

• 1 On what platform, with what version of which browser? These sort of questions are unanswerable because new versions of software can change all the answers. – Robert Longson Commented Oct 27, 2016 at 21:30
• So there is no general case, if you are testing both with the same browser on the same platform? – Gregory Sims Commented Oct 27, 2016 at 21:48
• So do it, what do you need us for? – Robert Longson Commented Oct 27, 2016 at 21:50

2 Answers 2

• First time visit: Case 1 wins.
• Repeated visits: Case 2 wins.

Case 1. where you write SVG into page will be slightly faster + it will save you one request. That means it is perfect for critical above the fold content, for first visit.

But in that case, since SVG is part of the document, it is not cached and not reusable across the pages. That means you will loose on performance on repeated visits. User browsing multiple pages, always downloads page including your inline SVG, instead using cached version, as it would in Case 2.

Some useful reading here https://osvaldas.info/caching-svg-sprite-in-localstorage

So after testing both cases, for my system without any network throttling, there is no recordable difference. With network throttling on GPRS the inline is very slightly faster; for me by only 0.1 seconds.