Internet, Networking, & Security Web Development How to Put SVG Graphics on Your Webpage Use one of these three methods by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on February 18, 2020 bsd555 / Getty Images Web Development Web Design CSS & HTML SQL Tweet Share Email SVG (Scalable Vector Graphics) enables your site to draw and render complex images, but using them is more than simply slapping tags into your HTML. For them to show up and your page to be valid, you must use one of the following three methods. Use the Object Tag to Embed SVG This HTML tag will embed an SVG graphic in your web page. Write the object tag with a data attribute to define the SVG file you want to open. Include width and height attributes in pixels to define the dimensions of your SVG image. For cross-browser compatibility, include the type attribute, like so: type="image/svg+xml" Your object would look like this: <object data="rectangle.svg" width="110" height="60" type="image/svg+xml"></object> Tips for Using Object for SVG Make sure that the width and height in your code are at least as large as the image you are embedding. Otherwise, your image might be clipped. Your SVG may not display correctly if you do not include the correct content type, like this: type="image Embed SVG With the Embed Tag In this method, you use nearly the same attributes as the object tag, including width, height, and type. The only difference is that you instead place your SVG document URL in the src attribute. Your embed would look like this: src="http://your-domain.here/z-circle.svg" width="210" height="210" type="image/svg+xml"/> Tips for Using Embed for SVG The embed tag is valid HTML5 but not HTML4. Remember to use a fully qualified domain name in the src attribute for compatibility. Use an iframe to Include SVG Another easy way to include an SVG image is through iframes. This method requires three attributes: width and height as usual, and src pointing to the location of your SVG file. Your iframe would look like this: <iframe src="http://someurl.com/od/examples/l/z-triangle.svg" width="370" height="370"></iframe> Tips for Using iframe for SVG The iframe will display with a border around the image unless you remove the border with a style, such as: style="border:none;" The iframe does not specify a plugin location, so if a visitor's browser doesn't have the plugin, they may see nothing at all, or they may see an error message. To avoid this, include some text inside the iframe opening and closing tags.