How can I use SVG code as a source for <img src={…} /> element?

Asked
Active3 hr before
Viewed126 times

8 Answers

90%

From IE9 and above you can use SVG in a ordinary IMG tag..,If you need your SVGs to be fully styleable with CSS they have to be inline in the DOM. This can be achieved through SVG injection, which uses Javascript to replace a HTML element (usually an <img> element) with the contents of an SVG file after the page has loaded.,My two cents: as of 2019, 93% of browsers in use (and 100% of the last two version of every one of them) can handle SVG in <img> elements:

If you use <object> then you get raster fallback for free*:

<object data="your.svg" type="image/svg+xml">
   <img src="yourfallback.jpg" />
</object>

For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:

div {
   background - image: url(fallback.png);
   background - image: url(your.svg), none;
}
load more v
88%

If I save the SVG to a file, I can use it directly in an <img> tag.,You can save the file directly from Adobe Illustrator as an SVG file.,Design something in Adobe Illustrator. Here’s a Kiwi bird standing on an oval.

I dont think is what you needed but it might be useful for someone.
Responsive element with SVG as background keeping ratio:

#shape {
   background - image: url(.. / img / shape.svg);
   background - size: 100 % 100 % ;
   width: 10 % ;
}

#shape: after {
   padding - top: 300 % ; /* % based on the image original ratio 100 x 300px*/
   display: block;
   content: '';
}
load more v
72%

The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files.,<image> implements the SVGImageElement interface.,The HTML spec defines <image> as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>
65%

This method is the simplest way to add SVG images to a webpage. To use this method, add the <img> element to your HTML document and reference it in the src attribute, like this:,To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.,This is similar to adding SVG to an HTML document using the <img>  tag. But this time we do it with CSS instead of HTML as you can see in the code snippet below.

This method is the simplest way to add SVG images to a webpage. To use this method, add the <img> element to your HTML document and reference it in the src attribute, like this:

<img src="happy.svg" alt="My Happy SVG" />
load more v
75%

2 Always a URL2.1 Absolute URLs2.1.1 A Note on Hotlinking2.2 Relative URLs2.3 Data URIs

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Below we will go through various ways we can use or render this React SVG logo on a webpage.,Now we can import our SVG images as a React component and use it in our code like this:,Now we can import our SVG file and use it in our React component like this:

Pretag
 Pretag team - issue, fix, solve, resolve
22%

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:,1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".,Tip: It is almost always best to use relative URLs. They will not break if you change domain.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Use <img> tag and embed fonts using Nano. If possible use static compression, and compress your SVG with Brotli for the smallest sizes.,2021-01-12: Updated to include static compression with Brotli for even smaller file sizes.,In addition, Nano can also generate GZip and Brotli compressed static SVG files, so that you can upload 85% smaller file sizes, resulting in major speed boost for your websites.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "undefined-undefined" queries related to "How can I use SVG code as a source for <img src={…} /> element?"