Cross domain svg sprite

Question

I know that there are many methods for using SVG sprites in HTML. My preference for this date was to use something like

<div class="container">
   <svg class="icon">
     <title>Icon Title</title>
     <use xlink:href="/svg/sprite.svg#icon"/>
   </svg>
</div>

However, now I wanted to load a sprite from a subdomain, for example:

<div class="container">
   <svg class="icon">
     <title>Icon Title</title>
     <use xlink:href="https://sub.domain.com/svg/sprite-home.svg#icon"/>
   </svg>
</div>

Unfortunately, this does not work because the file is not extracted. I also tried with <object>, but this also does not work.

So far i could use

<?php include_once("https://sub.domain.com/svg/sprite.svg"); ?>

This is normal since it does not require much refactoring. However, this also means that HTML is bloated.

Using the method, the <use>sprite receives caching. But using the method, the includesprite is not cached, but only embedded, and therefore it is far from ideal.

Does anyone use an alternative to the php enable method that is compatible with cross-domain requests and browser caching?

Answer 1

css-tricks , . , AJAX SVG jQuery (. ):

$j.get("https://sub.domain.com/svg/sprite-home.svg", function(data) {
  var div = document.createElement("div");
  div.className = 'no-display';
  div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
  document.body.insertBefore(div, document.body.childNodes[0]);
});

, SVG . , , , Chrome. ( ), .

<div class="container">
   <svg class="icon">
     <title>Icon Title</title>
     <use xlink:href="#icon"/>
   </svg>
</div>

:

• SVG
• ,
• SVG,

, , , CORS AJAX. , nginx, :

location ~* \.svg$ {
  ...
  add_header 'Access-Control-Allow-Methods' 'GET';
  add_header 'Access-Control-Allow-Origin' 'https://your.domain.com';
}