jeudi 23 novembre 2017

Sharing and caching common resources for SVG images inserted as objects

There are several SVG images inserted using <object> tag in here.

The main reasons for choosing this tag is:

  • to keep image resources in separate files
  • to ensure all fonts are resolved properly

By default fonts are not inherited from the main web page to the linked SVG images, however, when the style reference <?xml-stylesheet href="main.css" type="text/css"?> with the font definition is inserted into that SVG image, it is resolved properly in case of <object> tag.

However, when multiple images share the same css file, pointing to same woff font resource, it is loaded again and again by the browser. Even the same SVG image inserted as object is not cached and loaded again and again.

How can I ensure the font is loaded only once for multiple images?

I'd like to avoid inline SVG as real images are rather huge and couldn't be cached.




Aucun commentaire:

Enregistrer un commentaire