Experiments with Embedding SVG

<img src=> tag

no size in svg or img
Notes:
  • Browser can not autodetect height/width of an SVG file and sets img size to default 300x150 unless <svg> tag specifies it explicitly.
Setting width in <svg>
no size in img or svg
Setting width in <img>
no size in img, svg width=10
Autosize SVG <img>
img sized by js
This example tries trick explained in http://stackoverflow.com/a/14363879 but it fails, because <img> doesn't provide access to the structure of underlying <svg> data.
Conclusion: use <img> only if you know real <svg> size and don't need to change SVG content dynamically.

<object data=> tag

Notes:
  • 300x150 bounding box indicates the same problem with autodetecting height/width of an SVG file.
  • In Firefox before 70 there was the bug that adds 1px space between <object> border and SVG.
  • Short <object/> tag doesn't work.
Setting width in <svg>
Setting width in <object>