SVG(Scalable Vector Graphics) –

First let’s start with SVG, So in simple words SVG(Scalable Vector Graphics)  is used to define vector-based graphics for web.

Now what the heck is vector-based graphics right…?

So vector-based graphics unlike JPEGS, GIFS and BMP images are not made up of pixels but rather comprised of paths, which are defined by a start and end point, along with other points, curves, and angles along the way. A path can be a line, a square, a triangle, or a curvy shape. These paths can be used to create simple drawings or complex diagrams as well.

One of the advantages of vector-based images over other formats is that since they are not made up of specific number of dots or pixels they can be scaled up or down and they don’t lose their quality.Below is just an example.

SVG

So coming back to SVG, it is all about vector graphics and with it we can draw two and three dimensional vector graphics using HTML elements.These HTML elements are specific to SVG, but they are part of the Document Object Model (DOM) and can be hosted in web pages.

When you use SVG, you define the graphics within your HTML using the SVG tag. For example, the following code snippet declares an SVG element:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>

SVG

SVG includes a lot of built-in shape elements that can be embedded inside the svg tag.Each shape has its own set of attributes that helps to create the shapes appearance. For example, the following code snippet shows how to create two rectangles with different colors using the RECT element:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="black" x="40" y="0" width="100" height="75" />
</svg>

SVG + AngularJS
Few Points to note here:

  1. First that second rectangle drawn here will overlap with the first one that’s how svg works ,The order in which the figures are drawn they will be rendered in that order only.
  2. In order to create a rectangle inside an svg element ,You will have to define its top-left point and bottom-right point indicated with x and y. Also its height and width need to be defined.The default value for all attribute is set to 0(ZERO) if not defined.

There are other shapes as well such as circle, ellipse, polygons, line etc.For more detail regarding each you can go through the following link: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes .

You can group shapes using the g element. The g element is a container for other shapes. If you apply style to a g element, that style will be applied to all its child elements. When you create SVG, it is very common to group some elements inside a g container.

 

<svg width="400" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</g>
</svg>

SVG + AngularJS

As you can see in the image above the style applied on g element is applied on each of its children.

 

SVG(Scalable Vector Graphics) + AngularJs:

We can easily use SVG with AngularJs ,Since SVG elements are part of DOM.So we can create static as well as dynamic graphics using SVG but there are few points to be noted here before merging the two.

  • Since SVG uses has its own xml definition it dosen’t understand Angular Expressions such as written in curly braces ( {{}} ), So to make it understand we have to add ng-attr before all the dynamic expressions and then set the data bindings otherwise it will give error.

 

SVG + AngularJS

 

SVG + AngularJS

  • Second issue is related to directives ,Since Svg uses xml definition which is different from Html, Directives that generate Svg elements need to define that they generate Svg elements.That means that in the Directive Definition Object (DDO) that you return to define the directive, you will need to set the templateNamespace property to ‘svg’.

 

For example ,Below code shows how to define the Svg elements in directives templates.


app.directive("ngRect", function ngRect() {
return {
restrict: 'E',
template: ' <rect x="50" y="50" width="100" height="100"></rect>',
templateNamespace: 'svg',
replace: true
};
});

 

SVG + AngularJS

 

SVG + AngularJS

So that will be all on the very basic understanding of Svg with AngularJs, So next time want to start using AngularJs with Svg you know the key points to remember before falling into the pit.

Will cover on next blog about how can we work on removing d3.js as middleware completely for charts and switch to simple Svg with Angularjs…….

Looking for AngularJS Development Company, Hire our dedicated developers.!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.