←    Back

How to Add Scalable Vector Graphics (SVG) to Web Page

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

If you want to embed your hand-crafted SVG in your web page, you can use any of the methods discussed below.

Using <object> Tag

If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is your best option:

You can provide fallback text or images within the <object> block.

Using <embed> Tag

Although it’s similar to <object>, <embed> never has been and probably never will be part of any HTML or XHTML specification. However, it’s supported by most browsers and is often used to implement Flash plugins.

Using <iframe>

Since browsers can render SVG documents in their own right, it’s possible to load images within an <iframe>:

You can provide fallback text or images within the <iframe> block.

Embedding Inline SVG XML

An SVG image can be added as a code island directly within your HTML5 page using outer <svg> tags:

Using <img> Tag

SVGs can be added to your web page like any other image:

The usual width, height, alt and other attributes can be added should you require them.

Using a CSS Background Image

SVGs can be used as a CSS background for any element:

You can use of these options to include SVG to your project.


The Author

Other Articles

  • How to use Zaq: Codeigniter Template Parser Engine

    Zaq is a PHP based template parser engine developed to work with Codeigniter. This library has been developed for developers to integrate php codes in views easily. Using this library will also allow the view file to be more readable. View files in Codeigniter (or in any other framework following MVC) always contains both html and php codes which make them a bit harder to read. This problem can be eradicated by using a parser engine which makes the view files a lot more easier to work with.

  • Category Pagination in Jekyll

    This site is built on Jekyll – a blog aware static site generator. When I was building this, I wanted to separate my blog from my portfolio. Of course I would be using custom post type for my portfolio if I was developing on Wordpress. Here I thought to stay straight and simple and I just created two site categories: portfolio and blog and I am using custom permalink which makes it difficult to use the default pagination setup. And I also want to paginate only the blog category.

  • 15 Best Bootstrap Alternatives for Web Developers

    Choosing the right framework that is the perfect fit for your projects could be a little bit overwhelming – there are a lot to choose from. Perhaps, you want to go with popular choices like Bootstrap or Foundation, but if your website is going to be a fairly simple one, you won’t be needing most of the building blocks and materials included in the default package. The good news is that there are a handful of alternatives that are much leaner than Bootstrap or Foundation. Most of these frameworks ship with just the right amount of styles and components to help you get started, while allowing you to be able to extend them in the direction you want for your project.

  • 8 Icon Fonts to speed up Website Design Process

    Icon Fonts are nothing but fonts. But, instead of containing letters or numbers, they contain symbols and shapes. You can style them with CSS in the same way you style regular text. They’re ideal for small, frequently used shapes such as email, envelopes, telephones, widget controls and social media logos. Here is a list of most popular and easy-to-use icon font sets.

  • Download ZIP File Dynamically with PHP

    Here we will see how we can make a webpage act as an initializer to download a zip file. We will just provide the location of the file and PHP will download it to the user. In the back-end, the HTTP headers are responsible for the download. We will set the headers with PHP.

  • Create File Upload Class in PHP

    The basic process of providing a HTML form for uploading user submitted files to the server with PHP is fairly easy and simple. But there are some security implications that many of us are unaware of. We will be building a custom PHP class for secure file upload. This class will check the type and size of the file and rename the file in case of duplication.