Menu
So I'm trying to link an image (rocket.svg) into my svg but when I embed it into my site the svg shows but not the rocket.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="position:fixed; top:0; left:0; height:100%; width:100%; user-select: none;">
<rect style="fill:#33425B;" width="100%" height="100%" id="background"/>
<!-- Rocket -->
<image xlink:href="rocket.svg" x="15%" y="45%" width="10vw" height="10vw" id="rocket"/>
</svg>
371
If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.
With a recent Software Update to Apple devices (iPhones and iPads), you can now upload SVG files to Design Space directly from your phone!
For using SVG, you only need to drag them in your assets folder and then you can use them in your project file by using UIImage class named constructor.
Using vw with your height and width attributes is what is causing the problem, changing it works:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="position:fixed; top:0; left:0; height:100%; width:100%; user-select: none;">
<rect style="fill:#33425B;" width="100%" height="100%" id="background"/>
<image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/a3/NASA_Worm_logo.svg" id="tiger" />
</svg>Just putting this out there for future folks that have a similar problem. I'm very amateur and was using elementor with wordpress and having problems with my SVGs showing on apple devices. I found the following tool and it fixed my problems!
https://jakearchibald.github.io/svgomg/
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
