]
07-20-2023, 01:50 PM
I use in my website SVG sprite-sheets for all the icons and I thought they worked allright until I tried them on mobile. I use the SVG as follows `<svg class="icon-2x icon--primary"><use href="#icon-twitter" /></svg>` notice the `href` instead of `xlink:href` I do it like this because of two reasons:
1. The Ektron CMS removes the content inside `<use>` when using
`xlink:href`
1. [MDN](
says that SVG 2 removed the need for the xlink namespace, so
instead of `xlink:href` you should use `href`.
Here is a working example of how I make use of the svg-spritesheet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*
* Icon size variations
*/
.icon-2x {
height: 40px;
width: 40px;
}
.icon--primary {
fill: #12c3f4;
}
<!-- language: lang-html -->
<svg class="icon-2x icon--primary"><use href="#icon-twitter" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-twitter" viewBox="0 0 203 165.49">
<path class="cls-1" d="M180.06 44.78a81.65 81.65 0 0 0 20.17-5.18l2.77-1.12a1.48 1.48 0 0 1-.41.87 84 84 0 0 1-19.45 20.08 1.39 1.39 0 0 0-.66 1.33 110.93 110.93 0 0 1-.35 14.72 121.59 121.59 0 0 1-6.13 28.39 121.86 121.86 0 0 1-27.14 45 111.42 111.42 0 0 1-54.51 31.72 121.2 121.2 0 0 1-18.66 3.12 130 130 0 0 1-17.07.43 117.09 117.09 0 0 1-31.74-5.73A119 119 0 0 1 .38 166a1.33 1.33 0 0 1-.38-.32c22.71 2.16 43.17-3.51 61.52-17.43a49.59 49.59 0 0 1-6.5-.67 41.47 41.47 0 0 1-27-17.21A40.27 40.27 0 0 1 22.75 120c-.3-.86-.29-.85.57-.71a42.43 42.43 0 0 0 17.2-.65c.18 0 .36-.12.69-.23A41.93 41.93 0 0 1 7.8 76.93a43 43 0 0 0 9.1 3.72 40.53 40.53 0 0 0 9.69 1.48C15.44 74.09 9.1 63.4 8.23 49.69a40.78 40.78 0 0 1 5.56-23.29c.92 1.07 1.76 2.06 2.61 3A118.65 118.65 0 0 0 54 58.24a117.46 117.46 0 0 0 30 9.92A124 124 0 0 0 99.09 70c.74 0 .8-.13.68-.82-2.86-15.54 1.33-28.85 12.89-39.65A39.22 39.22 0 0 1 136 19c13.5-1.38 25.05 2.85 34.67 12.4a1.14 1.14 0 0 0 1.2.39 84.19 84.19 0 0 0 25.24-9.67l.6-.32a42 42 0 0 1-17.94 22.81c-.04.23-.02.24.29.17z" transform="translate(0 -18.76)"/>
</symbol>
</svg>
<!-- end snippet -->
I did some testing outside the CMS and if I use `xlink:href` it displays the SVG correctly. I was wondering if there is a way around this problem Any help would be very much appreciated. Thanks in advance.
1. The Ektron CMS removes the content inside `<use>` when using
`xlink:href`
1. [MDN](
[To see links please register here]
)says that SVG 2 removed the need for the xlink namespace, so
instead of `xlink:href` you should use `href`.
Here is a working example of how I make use of the svg-spritesheet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*
* Icon size variations
*/
.icon-2x {
height: 40px;
width: 40px;
}
.icon--primary {
fill: #12c3f4;
}
<!-- language: lang-html -->
<svg class="icon-2x icon--primary"><use href="#icon-twitter" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-twitter" viewBox="0 0 203 165.49">
<path class="cls-1" d="M180.06 44.78a81.65 81.65 0 0 0 20.17-5.18l2.77-1.12a1.48 1.48 0 0 1-.41.87 84 84 0 0 1-19.45 20.08 1.39 1.39 0 0 0-.66 1.33 110.93 110.93 0 0 1-.35 14.72 121.59 121.59 0 0 1-6.13 28.39 121.86 121.86 0 0 1-27.14 45 111.42 111.42 0 0 1-54.51 31.72 121.2 121.2 0 0 1-18.66 3.12 130 130 0 0 1-17.07.43 117.09 117.09 0 0 1-31.74-5.73A119 119 0 0 1 .38 166a1.33 1.33 0 0 1-.38-.32c22.71 2.16 43.17-3.51 61.52-17.43a49.59 49.59 0 0 1-6.5-.67 41.47 41.47 0 0 1-27-17.21A40.27 40.27 0 0 1 22.75 120c-.3-.86-.29-.85.57-.71a42.43 42.43 0 0 0 17.2-.65c.18 0 .36-.12.69-.23A41.93 41.93 0 0 1 7.8 76.93a43 43 0 0 0 9.1 3.72 40.53 40.53 0 0 0 9.69 1.48C15.44 74.09 9.1 63.4 8.23 49.69a40.78 40.78 0 0 1 5.56-23.29c.92 1.07 1.76 2.06 2.61 3A118.65 118.65 0 0 0 54 58.24a117.46 117.46 0 0 0 30 9.92A124 124 0 0 0 99.09 70c.74 0 .8-.13.68-.82-2.86-15.54 1.33-28.85 12.89-39.65A39.22 39.22 0 0 1 136 19c13.5-1.38 25.05 2.85 34.67 12.4a1.14 1.14 0 0 0 1.2.39 84.19 84.19 0 0 0 25.24-9.67l.6-.32a42 42 0 0 1-17.94 22.81c-.04.23-.02.24.29.17z" transform="translate(0 -18.76)"/>
</symbol>
</svg>
<!-- end snippet -->
I did some testing outside the CMS and if I use `xlink:href` it displays the SVG correctly. I was wondering if there is a way around this problem Any help would be very much appreciated. Thanks in advance.