Home/ Questions/Q 8858221
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T14:46:44+00:00

I am building a web application which relies on svg heavily. For the reference,

  • 0

I am building a web application which relies on svg heavily. For the reference, I am using raphael js library to deal with all of it.

In this particular case I have implemented something that mimics a scrollbar and moves bunch of svg features (~500 elements) across the screen. Part of those features are <text> (~100) elements. Other elements include <rect>, <image> and <path> elements.

So, I noticed that my application is not really very snappy on my laptop, and is down right annoying to deal with on an ipad, due to speed. However, whenever text elements are removed or ignored during scrolling, it immediately gets up to decent speed.

I tried doing some speed tests (very crude ones, using new Date().getTime()) and discovered that it takes ~10 ms to move all the elements except for <text> elements, however it takes ~120 ms when <text> elements are included.

I believe this happens because each letter is rendered as a vector shape and it takes loads of processing power to calculate what exactly is obstructed by such a complex structure.

Is it possible to just embed the text, so the text is rendered as raster graphic, and not as shapes? Or improve performance of rendering text in any other way?

I do not need background transparency, and I do not use any fancy fonts.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can prerender the text using Canvas and embed images into the SVG. I don’t know how this compares to text element rendering in general, but for our demos this works quite well (see the drop shadow in the “hierarchy” example – they are rendered into canvas first and then replicated and referenced from within the SVG).

    Note that these demos also make heavy use of virtualization, i.e. if you zoom into the image and only some of the elements are actually inside the viewport, the others are removed from the SVG, which gives a huge speedup.

    The demos do a lot more than just moving the elements around, so it should be easy to get the same or even better performance.

    I don’t know how to do this with raphael, though, but I believe you should be able to put the data url from the canvas image into the SVG with raphael, too.

    • 0