CODEWITHSUNDEEP
htmlsvg
Albraa
Albraa

Reputation: 437

Using a .svg file in HTML from a URL?

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!

Upvotes: 30

Views: 106892

Answers (1)

malifa
malifa

Reputation: 8165

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.

Upvotes: 38

Related Questions