How to develop an entire website with SVGs only ?

 A Scalable Vector Graphic (SVG) is one of the type of image format. Unlike the other varieties, SVGs do not rely on unique pixels to make up the images we see. Instead, they use ‘vector’ data. SVG content is visual content. Accessibility is already limited as a result of this.

In this article, we discuss ways you can develop an entire website with only SVGs! SVGs are XML syntax that specify shapes, lines, and fills so that the document can be used in a variety of ways, as opposed to bitmap images.

You may want to incorporate your carefully produced SVG right into a web page at times. There are at least five ways to achieve that goal but all methods have do's and don'ts.

1. HTML Page with Inline SVG XML 

An SVG image can be included in your HTML page as a code using outer <svg> tags:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Embedded SVG</title>
</head>
<body>

  <h1>Embedded SVG</h1>

  <!-- SVG code -->
  <svg width="300px" height="300px"
    xmlns="https://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
  </svg>

</body>
</html>

This method works in all modern browsers. The SVG becomes part of the page DOM so it can be manipulated with CSS or JavaScript perhaps to add animation or react to click events. (Note that any JavaScript embedded in the SVG itself will be blocked.)

The main disadvantage is that the SVG must be embedded into every page which requires it, and may need to be repeated for reusable icons. This adds to the page weight and, although the HTML may be cached, the SVG code can’t be (easily) reused elsewhere.

One solution to the repeated image issue is to create a hidden SVG block on each page (with CSS display: none). This can optionally contain multiple images referenced using an id:

HTML
<svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <symbol id="box" viewBox="0 0 32 32">
      <title>box</title>
      <rect width="32" height="32" fill="#00c" />
    </symbol>
    <symbol id="circle" viewBox="0 0 32 32">
      <title>circle</title>
      <circle cx="16" cy="16" r="16" fill="#c00" />
    </symbol>
  <defs>
</svg>

These items can then be used n times with an SVG use element:

HTML
<svg width="20" height="20">
  <use xlink:href="#box" />
</svg>

<svg width="30" height="30">
  <use xlink:href="#box" />
</svg>

<svg width="40" height="40">
  <use xlink:href="#circle" />
</svg>

Remember original image can still be styled using stylesheet, although it’s not possible to apply additional styles to the <use> itself.

2. Use an <img> Tag

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

HTML
<img src="image.svg" alt="my image" />

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

The browser treats the SVG like any other image. For security reasons, any scripts, external stylesheets, links, and other SVG interactivity will be disabled.

A target anchor can be used if multiple images are defined within a single SVG - such as myimage.svg#circle - but this won’t work in older browsers.

3. Apply a CSS Background Image

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

CSS
#myelement {
  background-image: url('./image.svg');
}

Inline data URIs with UTF8 encoding may also be practical for smaller, regularly used SVGs which are unlikely to change often (and invalidate the whole stylesheet):

CSS
.myelement {
  background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="100" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>');
}

Like <img> tags, scripts, links, and other types of interactivity are disabled when you use this method.

4. Load in an <iframe>

Browsers can render an SVG document on its own, so you can load an image within an iframe:

HTML
<iframe src="./image.svg">
  Your browser does not support iframes.
</iframe>

We can also have a portable SVG with it's own scripts which we can isolate from main page. As a consequence manipulating an SVG image from  JavaScript of the main page will become more tedious, especially if  it is hosted on another domain.

5. Use an <object> Tag

The <object> tag in HTML can add a SVG to the main page

HTML
<object type="image/svg+xml" data="./image.svg">
  <img src="./fallback-bitmap.png" />
</object>

Fallback text or images can be used within the <object> block in a similar way to iframes.

Styles and scripts within the SVG will run. It is not possible to style the SVG using CSS in the HTML page however scripts can manipulate individual elements:

Javascript
// get first <object>
const objTag = document.querySelector('object');

// wait for SVG to load
objTag.addEventListener('load', () => {

  // reference to SVG document
  const svg = objTag.getSVGDocument();

  // make changes
  Array.from(svg.getElementsByTagName('path'))
    .forEach(p => p.setAttribute('fill', '#00f'))

});

Previously <object> was the most-used option, because it was the only reliable way to use an SVG in old releases of IE, but now it's not.

Using SVG Techniques

If you are using an SVG as an image  & don’t need to change the styling or add scripting, an <img> tag or a CSS background is possibly the best option. The file can be cached in the browser and reused on other pages with no further download.

Whenever you require interactivity, the most popular option is to inline the SVG directly into the HTML. Styles and scripts can manipulate the DOM, links can be added to any shape, and sophisticated SVG filters can be applied to other page elements.

The <object> tag is just for favor. However, it remains a viable technique if you want to keep SVGs separate & cacheable, but they require a little JavaScript manipulation.

iframes may be suitable for some related projects, but try to minimize the use of <embed> tag as much as possible with modern browser.