How can we improve the Microsoft Edge developer experience?

SVG External Content

Allows referencing external content in SVG. A common use case for this would be <use xlink:href="lib.svg#template" fill="#000000"></use>.

http://www.w3.org/TR/SVG2/struct.html#UseElement

967 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Jonathan Sampson [MSFT]Jonathan Sampson [MSFT] shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    12 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Anonymous commented  ·   ·  Flag as inappropriate

        SVG External Content -is needed for Microsoft Edge -
        Why does Microsoft always have to go their own way???

      • Anonymous commented  ·   ·  Flag as inappropriate

        @Microsoft Edge: In which public release will the "external svg use method" <use xlink:href="mysite.com/#icon-edge"></use> be supported? Release date?

      • Bill DelaneyBill Delaney commented  ·   ·  Flag as inappropriate

        My shim (svgforeverybody) does not work in Edge. Sites I have developed using SVG are completely graphic-less in Edge. Ugh.

      • Anonymous commented  ·   ·  Flag as inappropriate

        +1

        Here is the icon system that I built and use: http://mcraiganthony.github.io/svg-icons/

        External SVG is a must. The key is that it allows the use of inline SVGs. Inline SVGs can be sized using font size (and inherits font size from parent). The old SVG background image method requires that you set specific sizes = lame.

      • fvschfvsch commented  ·   ·  Flag as inappropriate

        We’re using external SVG sprites for most new projects at work. Right now we’re including svg4everybody, a small JS polyfill, for IE 9-11. I hope this feature will make the cut in Edge!

        A demonstration, without any JS polyfilling (compare Edge and any other browser, including Opera Mini):
        http://fvsch.com/code/svg-sprite/

      • Anonymous commented  ·   ·  Flag as inappropriate

        A even better or useful scenario is via CSS background image, consider this line:

        background: url('path/to/sprites.svg#symbol-id') no-repeat;

        this solves a number of problems:

        1. even though you are still loading a sprite file, you don't have to build it in a visual grid, so you don't have to calculate the position of each sprite, just reference each via id. and if you are doing responsive design, you don't need to maintain multiple background-sizing and positions for each icon.

        2. since symbols are not drawn until used, it could potentially save a lot of system memory, by not loading a whole symbol library. this is especially important for mobile and xbox apps.

      Feedback and Knowledge Base