I use Webpack in conjunction with Vue.js.
In the map.svg file I store all the SVG icons in the form like this:
<symbol id="someID"><path></symbol>
<symbol id="otherID"><path></symbol>
In the code I use a construct like this with SVG4Everybody-plugin:
<svg><use xlink:href="map.svg#someID"></svg>
But this does not work, because Webpack does not distribute SVG sprites. What to do in this situation? Thanks!
Webpack 3.6.0
Vue 2.5.2
You must add the SVG sprite to HTML using the <object>
<object type="image/svg+xml" data="map.svg">
Your browser does not support SVG
</object>
Your browser does not support SVG - failback for old browsers
After adding a sprite to the HTML, you can use the icons from the sprite:
<svg viewBox="0 0 24 24">
<use xlink:href="map.svg#someID">
</svg>
Use the viewBox options to match the size of the icons.
Related
Using the Imagick CLI with the example SVG document coded below, the images do not render in the png, however if convert the SVG to an html document it all loads. I can decode the base64 online and it shows the valid image, and tried different Image tag notation. I am lost at what I am doing wrong.
magick .\test.svg image.png
ImageMagick 7.1.0-49 Q16-HDRI x64 7a3f3f1:20220924
Windows 10 OS
Example Code that is not Rendering:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="position: relative; overflow: hidden;" version="1.1" id="natal_chart" width="800" height="800" viewBox="0 0 800 800">
<image x='322' y='402' preserveAspectRatio='none' href='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'></image>
<img src='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'/>
</svg>
If you want to use the above code as a standalone SVG file that you feed to ImageMagick, you need to do several things:
Use a default namespace: xmlns="http://www.w3.org/2000/svg" in addition to the xlink namespace declaration
Use the xlink namespace for the href attribute
Install Inkscape. If it is in PATH, imagick will pick it up to render the file. Do not use librsvg, it will fail.
Do not include the invalid <img> tag from the HTML namespace.
This file was rendering for me in Inkscape, but not with rsvg-convert:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" viewBox="0 0 800 800">
<image x='322' y='402' preserveAspectRatio='none' xlink:href='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'></image>
</svg>
As for ImageMagick, I was running into problems because librsvg was installed in parallel, and despite what the documentation says, was prefered. But as in the optimal case the conversion is delegated to Inkscape anyway, you can use it directly in CLI mode:
inkscape -o image.png .\test.svg
I have a SVG file (an exported Gliffy diagram) that I want to open and edit in Inkscape. When viewing the code of the file using the developer options of Chrome, it looks like:
<svg xmlns="...>
<g transform="...>
<image xlink:href="data:image/svg+xml,%0A%20...></image>
</g>
... (about 20 more <g>...</g> tags)
</svg>
When decoding the part starting with %0A%20..., it translates to something like
data:image/svg xml,
<svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
<style>
.gliffy-rte-text {
...
The issue is, that in Inkscape those parts will be replaced by a placeholder telling me "Linked image not found" and as speculated here, Inkscape most likely is not able to read the CSS styling correctly or probably at all.
I would very much appreciate any thoughts or ideas on how to convert the file such that it can be edited and displayed correctly in Inkscape.
You might convert all styling to element attributes using SVGOMG:
replace your embedded <image> element by the decoded data url content. Your parent svg should look something like this:
<!-- parent svg -->
<svg xmlns="http://www.w3.org/2000/svg" >
<!-- embedded svg decoded data url -->
<svg xmlns="http://www.w3.org/2000/svg" height="50000" width="50000">
<style>
.gliffy-rte-text {
}
</style>
</svg>
</svg>
Use SVGOMG "inline styles" and "style to attribute"parameter:
You should disable all other optimizing parameter, since they might strip to many other attributes.
Expected before result
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<style>
circle{
fill:none;
stroke: orange;
stroke-width:10;
}
</style>
<circle cx="128" cy="128" r="100"/>
</svg>
After
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<circle cx="128" cy="128" r="100" fill="none" stroke="orange" stroke-width="10"/>
</svg>
Open the wrapper file in a browser. Right-click on the area containing the embedded SVG, and choose "Save (image) as...". If the wrapper contains multiple <image> tags, you will have to save them to separate files, but at least they will be in a form Inkscape can handle.
If you want to get them all together in one SVG file again, you will have to re-import them via the Inkscape import function. Take care to select 'Include as editable object', or you will end up right where you started:
The speculations above about CSS are unsubstantiated, btw. Inkscape will convert the content of a <style> element into inline style attributes, but otherwise handle them correctly. What happened is stated quite clearly in the above screenshot: data URLs embeded via an <image> tag will not be editable in Inkscape.
I'm trying to make an image unveil effect with an SVG mask, where a path with a quite complex geometry is scaled via CSS transforms:
clip-path: url(#aqua-dot-mask);
https://codepen.io/rberneder/pen/pojaNex
I tested the effect in Chrome, Firefox and Safari. The first two browsers are presenting what I want to achieve, but Safari has real troubles and glitches.
It seems Safari still has no full support of the clip-path property, but it should be capable of this particular one.
https://caniuse.com/#search=clip-path
Any ideas?
Thanks #Robert for your help. The solution I came up with is to just put the img tag as image tag into the SVG.
Instead of:
<img src="..." style="clip-path(#mask)" />
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
</svg>
I now have:
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
<image href="..." style="clip-path: url(#mask);" />
</svg>
https://codepen.io/rberneder/pen/xxwYmOj
This works for me.
I am working with gulp-sprite trying to load svgs into a styleguide. I have created the icon.svg, but when I try to display them in a different HTML file using xlink:href the svgs aren't showing. The shadow-root is empty.
I have tried multiple things, this works in Edge, but no other browser. I have even got it to work including the sprite, but hiding it within the html.
<!-- icon in html -->
<svg>
<use xlink:href="assets/images/icons.svg#BlueCard"></use>
</svg>
<!-- external svg file -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 72 64" id="BlueCard"><path d=...></symbol></svg>
I expect the icon to be there and the shadow root to not be empty. Should include the path
I'd like to embed an external SVG image file within an <svg> tag. To do this, i'm using SVG's <image> tag as follows:
<svg width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="48" height="48"
xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
transform="scale(5.0)" />
</svg>
As you can see, I'm trying to scale the nested SVG by 5.0 by adding a transform attribute. Unfortunately, in both Firefox and Chrome, I'm sometimes getting a blury image because it's rasterizing the nested SVG before scaling it up.
Note: It sometimes works as expected (The nested SVG stays crisp) in Firefox and Chrome, but not always (For example, if I open the attached JSFiddle in Chrome, it's blury/broken. If I press F5, it's crisp/working)
Is there any way to ensure that the nested SVG is never rasterized before scaling ?
Thanks :)
JSFiddle: http://jsfiddle.net/a9NRY/17/
This is a known bug in Chrome, caused by the fact that the image is cached. You can't fix this from your code, since it's a browser bug, but you could try to disable caching for that image on the server side.