In modern browsers, SVG static images can be inserted just like normal web images (JPG, PNG or GIF). However, if they contain animations or hyperlinks of any kind, including the SnipSVG embedded video links, you need to wrap the SVG image reference in an <object> tag.

Inserting static SVG images in web pages

Static SVG images are handled like regular images by current browsers. Just use a regular <img> tag or your web editor's standard Insert Image tool.

Inserting SVG images with animations or hyperlinks in web pages

To do this you need to wrap the SVG image reference in an <object> tag with a special syntax. In SnipSVG you can get the code snippet for this with your SVG image name directly in the Save As... dialog.

1.Select Save As... in the Edit menu (even if the image has already been saved).

2.Click on the HTML Code button if the code isn't visible.

3.Select Full Size or Responsive, then Copy to get the code.

Writing the <object> code yourself

The basic syntax is quite simple:

<object type="image/svg+xml" width="67" height="118" data="SwitchButton.svg">
   <img width="67" height="118" src="SwitchButton.svg">
</object>

OR

<object type="image/svg+xml" width="100%" data="SwitchButton.svg">
   <img width="100%" src="SwitchButton.svg">
</object>

Object tag wrapper attributes

Wrapped img tag attributes