Embedding SVGs in Web — Part 2

3 min readDec 6, 2018

Repo — https://github.com/anandshende/SVG
Part 1 discusses the SVG features and methods to embed SVGs.

This section covers the styling and interactivity features of the SVGs. The styling property can be used to change the fill(inner regions) and stroke(boundaries) colors of the SVG graphics. The interactivity features give the SVG abilities to adapt to event of the DOM, pointers and keyboards.

This section will cover these two topics in a progressive manner.

Non-interactive SVG

Let begin by displaying a simple non-interactive SVG with only fill and stroke colors.

Code — https://github.com/anandshende/SVG/tree/master/display-svg

The SVG is embedded using object tag and in the SVG document we link a stylesheet. The stylesheet container only one class, which specifies fill and stroke color as black.

/// HTML<body>
  <object id="svgObject" data="./icons/close.svg" type=""></object>
</body>
/// Stylesheet.close-icon {
  fill: black;
  stroke: black;
}/// SVG
<?xml-stylesheet type="text/css" href="../icons.css"?>

Adding a hover to SVG

Code— https://github.com/anandshende/SVG/tree/master/svg-object-hover-effect

Here the styling rules added were:

.close-icon:hover {
  fill: blue;
  stroke: blue;
  cursor: pointer;
}

Adding Interactivity — Click Event

Code- https://github.com/anandshende/SVG/tree/master/click-event

The click event can be caught in the SVG document using the JavaScript onclick(). Since the JavaScript between the parent document and its child browsing context cannot be shared, we need to make use browsing context navigations, ie the use of window.top() . This method returns the window object of the parent browsing context.

/// SVG Document<svg onclick="top.svgEventTrigger(event, 'close')" ... >
/// HTML<script>
  var svgEventTrigger = function (event, svgIconName) {
    alert('Clicked on ' + svgIconName);
  }
</script>

As explained above, the top window object contains the method called svgEventTrigger() .

Pointer-Events:

Code- https://github.com/anandshende/SVG/tree/master/pointer-events

Pointer-events is a CSS rule which takes several values for an SVG such as fill, visible, visible-fill etc. When the we don’t want the SVG to respond to pointer events, we can set it to none. Which can make the background clickable.

The SVG is always rendered on top of the container, it intercepts all the clicks and prevents them from crossing the browsing context, hence the clickable nature of the container is disturbed.
We can prevent such from happening by removing the interactivity related to pointer-events from the SVG.

To achieve this, I made the following changes to the code.

/// HTML<style>
  object, object *{
    pointer-events: none;
  }  div {
    background: lightgreen;
  }
  
  div:hover {
    background: yellow;
  }
</style><div style="display: inline-block;" onclick="alert('Parent Container')">
  <object id="svgObject" data="./icons/close.svg" type=""></object></div>

Independent DOM

Code — https://github.com/anandshende/SVG/tree/master/independent-dom

This is to demonstrate that the SVG DOM works independently of the parent DOM.

<style>
  object * {
    display: none;
  }
</style>

Adding the above CSS, should hide all the child nodes of object , but since it is not a part of the same DOM, the rules do not propagate, hence we see that all children are visible.

Independent DOM — hence no elements are hidden and pointer-events to work

So this must be sufficient enough for any web developer to embed SVGs into a webpage and use its features. I will continue to work on this and update this story whenever I do so…

Thanks for Reading, I hope this helps you all… Please let me know your views in the comments…