I am trying to use an svg from an external source in my html. Let's say I have this svg: https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg
I found many ways to do this, including:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
But unfortunately, the styling I have to use applies to svg tags. If I use this for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"/>
</svg>
It won't show up on my page, I just get an empty white square! Is there anyway I can do this inside svg tags? Thanks!
You can embed SVG elements directly into your HTML pages.
If the URL reference is from the href attribute on SVG animation elements, only same-document URL references are allowed [svg-animation]. A URL referring to a different document is invalid and the document must not be fetched.
❓ How can I convert SVG to HTML? First, you need to add a file for conversion: drag & drop your SVG file or click inside the white area for choose a file. Then click the "Convert" button. When SVG to HTML conversion is completed, you can download your HTML file.
You have to specify a width and height for your svg to display properly:
<svg width="90" height="90">
<image xlink:href="your.svg" src="yourfallback.png" width="90" height="90"/>
</svg>
Update
You can do this via CSS too of course, but you have to be sure that your <image>
tag has width and height set in your CSS if you don't specify the html attributes directly:
svg {
width: 150px;
height: 150px;
}
image {
width: 100px;
height: 100px;
}
This will set the size of your actual image (the svg) to 100px * 100px
, but has a "wrapper" of 150px
. Regarding to your comment to your original question, maybe that's why you don't see your image, because you dont have set a width / height and only styles which apply to your wrapping element (<svg>
)
Example Fiddle: https://jsfiddle.net/7334vrmq/
Hope this helps.
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