PERSONAL ESHOP is committed to protecting your privacy.
image width should be in % if max-width doesn't work, use width instead
1. Using an < img > tag
The best and the simplest way to embed SVG into HTML is to use the < img > tag. It has a syntax that is similar to how we embed other image formats like PNG, JPEG and GIF:
< img src="svg/target_icon.svg" style="width:40%;">
2. Using an < object > tag
Technically, < object > tags can be used on many elements, including SVG files, and therefore not recognized as image elements, thus not available on image search. The workaround is to use an < img > tag as fallback. Here the object will use 50% of the available space and the content will fill it completely and be resizable:
< object width="50%" type="image/svg+xml" data="svg/svg_icon_01.svg" >
< !-- Your fall back here -- >
< img src="svg/sun rays.svg" style='width:300px;' />
< /object >
The only problem is double loading, that is the browser will load the image on the < object > tag, and another image on the < img > tag, even though only one of them is required, while the other is hidden. If you cache your images, and mark these files as cacheable on your server, at least, the browser will load these images from the cache, but still, there is no stopping the double loading.
3. Using inline SVG in HTML5
Essentially you are embedding all your SVG codes inside your HTML:
< svg xmlns="http://www.w3.org/2000/svg" >
< text x="10" y="50" font-size="30" >My SVG< /text >
< /svg >
4. Using an < embed > tag
Listed here for completeness, but do NOT use < embed > tag. It is not part of HTML specifications but widely supported on all browsers mainly used to implement Flash plugins.
< embed type="image/svg+xml" src="image.svg" / >
5. Using an < iframe > tag
Do NOT use an < iframe > where you can use an < object > tag instead. Iframes are difficult to maintain, does not get indexed by search engines and bad for SEO (Search Engine Optimization).
< iframe src="image.svg" >< /iframe >
As can be seen from comparison, it is clear we are recommending < img > tag for most use cases. The only exception is if you need interactivity, where you require dynamic changes to your SVG based on user interactions.
We do not recommend inline SVG for most cases, with the only exception being preloading pages. Preloading pages are contents shown when your application has yet to completely load, and since inline SVG shows almost immediately, it can be used to show images or graphics while waiting for your application to load.