Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Advantages of SVG server-side generation

Sunday, October 5th, 2014 by Servage

Being vector graphics, SVG has several advantages in this responsive web designing era. Therefore, digging deeper for SVG creation through various ways may explicitly help modern web developers .

Generating SVG

Before jumping into any discussion on SVG let’s have some basic concept clear in our mind regarding the SVG and its importance in the web and mobile designing industry. SVG is short for scalable vector graphics. There are two sorts of graphics formats in the digital graphic industry. One is raster or pixel/dot based and another is vector based.

 

Raster images show pixelations/ugly display of pixels when scaled to an overtly big size. Contrary to this, vectors are the computer mathematics of shapes including lines, curves, texts, etc. so they can scale at any level without losing their beauty at all.

 

Now, with these clarifications, let me tell that vector data can be stored in simple XML format and can be manipulated according to our custom needs. Thus, it is easy to create SVG images using XML in any code editor and embed them with HTML or other code of the web page or mobile app.

 

Advantages of SVG

Being a vector graphics, SVG has tons of advantages in this retina display and highly animated as well as interactive images era. Its lose-less properties and index-ability by bots attracts many responsive web developers to incorporate in their modern projects.

 

Another class of SVG fans are e-commerce web developers who have to zoom as well as compressed images at greater scales and SVG allows them to do so.
Various ways to Create SVG

You can create a SVG image with simple HTML coding or CSS coding as most of modern browsers support the rendering of SVG now. Use of JavaScript is very common practice for modern web developers as dynamic and animated SVG are in trend.

 

However, creating SVG on the client-side may harm the performance due to a delay in loading and processing the images. Therefore, there are various other ways to create SVG using server-side code and we will see them at a glance in later sections.

 

Embedding SVG in HTML

Here is a sample code to show how SVG is embedded directly in HTML code.

<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" />
</svg>
</body>
</html>

In the above code, we have directly embeded <svg> HTML element in HTML code and defined its width and height. Same way with the <circle> elements, we have defined the x and y coordinates of the center of the circle and defined the radius of the circle by r attributes. Similarly color fill and stroke properties have been defined in simplest ways.
Generating SVG on Server

When we use JavaScript and jQuery to generate SVG, we would have lots of problems if we do this in the browser. Therefore, many seasoned web developers prefer to either ship the generated data with AJAX request or move the generation script itself on the server so all complex code will run on the server and through WebKit we can see the results in the browser with minimal loading.

 

The majority of back-end languages support SVG generating libraries, but the approach is to take help of Raphael.js, Phantom.js, JSDOM, etc. along with jQuery. Let’s see with an example codeĀ  how we can do that with Rapheal.js libraries:

<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery- 2.1.0.min.js"></script>
<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
</head> <body> <div id="svg"> </div> </body> </html>

Thus, we have simple ways to embed code in HTML broiler plate and further draw SVG images in custom ways on the server.

 

References & More Reading
Love Generating SVG With JavaScript? Move It To The Server!
SVG in HTML

Advantages of SVG server-side generation, 3.5 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.