Nirajan Ghimirey's Workshop: svg example

Showing posts with label svg example. Show all posts

Sunday, March 22, 2015

A brief History in SVG

SVG was developed by W3C SVG Working Group in the year 1998. Chris Lilley was the former chairman of that group. SVG 1.0 became was the first version of SVG and it became W3C Recommended in the year 2001 on 4th of September. Another version of SVG which was the SVG 1.1 became the W3C Recommendation in the year 2003 on the 14th of January. Mobile SVG Profiles which were the SVG Tiny and the SVG Basic that came across after its version 1.1 and it became the W3C Recommendation in the year 2003 on the same date as the SVG 1.1. SVY Tiny 1.2 and SVG 1.1 Second Edition became the W3C Recommendation in the date 22nd December 2008 and 16th August 2011 respectively.

SVG was furious technology introduced in late 1998 and which got very eagerly and popularly familiar to new developers that helped them with many aspect of web development, as SVG was used to replace the high resolution large images from the web which made websites more fast and accurate in design.

What is SVG?

SVG stands for Scalable Vector Graphics and it is an XML-based vector image format which is wdely used over web platforms these days.
SVG is two-dimensional graphics providing support for animation and also for interactivity. SVG was initially released in 2001 on 4th of September but it got more highlighted by 2003 when it came with its new version 1.1 and SVG Tiny. SVG was originally developed by W3C and it is an open standard free to use and consume. Every popular browsers in globe like Chrome, Safari and Mozilla contains at least some degree of SVG rendering support.

XSLT Browser compatibility

All the latest version of browsers like Apple Safari, Google Chrome, Mozilla Firefox, Opera and all browsers supports SVG features and also SVG functionality are supported by internet explorer 9.0.

Features of SVG:

Paths: SVG path has compact coding and in all kind of cases the coordinates which are absolute following capital letter commands are used after the lower-case letters.

Basic Shapes: The rectangles in SVG are the standard elements.

Text: The Unicode character which is included in the SVG file has the expression as a XML character data.

Painting: This shapes can be filled or outlined in SVG.

Color: All the elements can be applied with the color in SVG.

Gradients and patterns: The shapes can be filled with the patterns which can be repeating as well in SVG.

Clipping, masking and composting: Graphic elements can be outlined to define the regions which can be painted in SVG.

Filter effects: It can apply filter effects to the elements.

Interactivity: The SVG images have the feature to interact with users in different possible ways.

Linking: The images can contain hyperlinks which will lead to other documents.

Scripting: Scripts can be used for accessing SVG documents.

Animation: Built-in animation can be used to animate the contents.

Fonts: Text can use external font files.

Metadata: The metadata of content is provided to the authors.

Explain Linear in SVG

As like radial linear is also a kind of gradient in SVG, now to define a gradient I would say that a gradient is a smooth transition which occurs from a color to another color. <linearGradient> element is used for the purpose of defining and describing the linear gradient, <linearGradient> element should be nested with some tags like <defs>.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>Nirajan Ghimirey’s Workshop  </title>  
 </head>  
 <body>  
 <h1>Example for Linear </h1>  
 <svg height="200" width="400">  
   <defs>  
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">  
       <stop offset="0%" style="stop-color:rgb(58, 175, 255);stop-opacity:1" />  
       <stop offset="100%" style="stop-color:rgb(33, 228, 255);stop-opacity:1" />  
     </linearGradient>  
   </defs>  
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />  
 </svg>  
 <svg height="200" width="400">  
   <defs>  
     <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">  
       <stop offset="0%" style="stop-color:rgb(101, 166, 255);stop-opacity:1" />  
       <stop offset="100%" style="stop-color:rgb(33, 228, 255);stop-opacity:1" />  
     </linearGradient>  
   </defs>  
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />  
 </svg>  
 </body>  
 </html>

Patterns in SVG

Patterns can be developed in SVG or they can be made from SVG images or SVG shapes. However these patterns can also be made from bitmap images, the structure of SVG patterns are like tiles that are made in Photoshop. These patterns are mainly used to fill the shapes , these patterns made with images are used to fill those shapes in SVG.An element called the circle element is used as a fill pattern in the SVG.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>Nirajan Ghimirey’s Workshop</title>  
 </head>  
 <body>  
 <h2>Pattern Example</h2>  
 <svg width="120" height="120" viewBox="0 0 120 120">  
   <defs>  
     <pattern id="Triangle"  
          width="10" height="10"  
          patternUnits="userSpaceOnUse">  
       <polygon points="5,0 10,10 0,10"/>  
     </pattern>  
   </defs>  
   <circle cx="60" cy="60" r="50"  
       fill="url(#Triangle)"/>  
 </svg>  
 </body>  
 </html>

What is SVG Radial ?

Radial in SVG falls under a kind of gradient, a gradient can be described as smooth transistion which occurs from one color to another color.<radialGradient> element is responsible for defining and describing the radial gradient. This <radialGradient> element should be always nested with some tags like <defs>. This Radials are used for defining an ellipse with the help of gradient from one color to another one.<radialGradient> element is used for the purpose of defining and describing radial gradient.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>Nirajan Ghimirey’s Workshop</title>  
 </head>  
 <body>  
 <h2> radial example</h2>  
 <svg height="150" width="500">  
   <defs>  
     <radialGradient id="grad1" cx="45%" cy="45%" r="45%" fx="45%" fy="45%">  
       <stop offset="0%" style="stop-color:rgb(43, 199, 255);  
    stop-opacity:0" />  
       <stop offset="100%" style="stop-color:rgb(58, 175, 255);stop-opacity:1" />  
     </radialGradient>  
   </defs>  
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />  
 </svg>  
 </body>  
 </html>

What is SVG path ? work of path in SVG

What is a path? A path can be defined as the representation of outline of shapes which can be filled, stroked and can also be used as clipping path. Without the concept of a current point path’s description cannot be given, now in SVG a path is defined by the element called 'path'. Path in SVG is used to represent the outline of a shape and also it is used for representation the geometry of the outline of object.

Below is the detailed example for SVVG Path.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="EN">  
   <title>Nirajan Ghmirey’s Workshop</title>  
 </head>  
 <body>  
 <h4>SVG Path Examples</h4>  
 <svg height="400" width="450">  
   <path id="lineAB" d="M 100 350 l 150 -300" stroke="black" stroke-width="3" fill="none" />  
   <path id="lineBC" d="M 250 50 l 150 300" stroke="black" stroke-width="3" fill="none" />  
   <path d="M 175 200 l 150 0" stroke="yellow" stroke-width="3" fill="none" />  
   <path d="M 100 350 q 150 -300 300 0" stroke="green" stroke-width="5" fill="none" />  
   <!-- Mark relevant points -->  
   <g stroke="black" stroke-width="3" fill="black">  
     <circle id="pointA" cx="100" cy="350" r="3" />  
     <circle id="pointB" cx="250" cy="50" r="3" />  
     <circle id="pointC" cx="400" cy="350" r="3" />  
   </g>  
   <!-- Label the points -->  
   <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">  
     <text x="100" y="350" dx="-30">A</text>  
     <text x="250" y="50" dy="-10">B</text>  
     <text x="400" y="350" dx="30">C</text>  
   </g>  
   Sorry, your browser does not support inline SVG.  
 </svg>  
 </body>  
 </html>

Interactivity in SVG, Interactivity easy in SVG

Interactivity in SVG s not so difficult, it can be done with the help of features of SVG language itself. Those features can be used to make content more responsive to the user initiated events. This feature in SVG can be used for causing changes to the cursor which shows the current position of the device which is been pointing by utilizing the user movements of the pointing device. This can also be used for the purpose of causing animations in user-initiated actions lie a button press, cursor movements etc.

Below is an example of simple SVG interactivity example for expanding this post to its end.

Example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Nirajanghimirey’s workshop</title>
</head>
<body>
<h1> Interactivity example</h1>
<svg width="600" height="600">
    <script type="text/JavaScript">
        <![CDATA[
        function showColor() {
            alert("Color of the Rectangle is: "+
            document.getElementById("rect1").getAttributeNS(null,"fill"));
        }

        function showArea(event){
            var width = parseFloat(event.target.getAttributeNS(null,"width"));
            var height = parseFloat(event.target.getAttributeNS(null,"height"));
            alert("Area of the rectangle is: " +width +"x"+ height);
        }

        function showRootChildrenCount() {
            alert("Total Children: "+document.documentElement.childNodes.length);
        }
        ]]>
    </script>
    <g>
        <text x="30" y="50" onClick="showColor()">Click me to see the rectangle color.</text>
        <rect id="rect1" x="100" y="100" width="200" height="200"
              stroke="#1998FF" stroke-width="8" fill="#2BC7FF"
              onClick="showArea(event)"
                />
        <text x="30" y="400" onClick="showRootChildrenCount()">
            Click on me print child node count.</text>
    </g>
</svg>
</body>
</html>

Friday, March 13, 2015

Clip art in SVG

Below are some examples and scripts for clip arts in SVG

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>SVG Blur Art</title>  
   <style>  
     ellipse{  
       stroke:yellow;  
       fill: blue;  
       stroke-opacity: 1;  
       filter: url(#blurEffects2);  
       stroke-width: 8;  
     }  
     rect{  
       stroke:red;  
       stroke-width:3;  
       fill:green;  
       filter:url(#blurEffects1);  
     }  
   </style>  
 </head>  
 <body>  
 <h2>Example of SVG Blur Art</h2>  
 <svg height="150" width="150">  
   <defs>  
     <filter id="blurEffects1" x="0" y="0">  
       <feGaussianBlur in="SourceGraphic" stdDeviation="35" />  
     </filter>  
   </defs>  
   <rect x="20" y="20" width="120" height="100" />  
 </svg>  
 <svg height="400" width="500">  
   <defs>  
     <filter id="blurEffects2" x="0" y="0">  
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" />  
     </filter>  
   </defs>  
   <ellipse rx="100" ry="50" cx="100" cy="90" />  
 </svg>  
 </body>  
 </html>

This next example is little different from the previous one, here I have tried to make out drop shadow effect in clip art.

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>SVG Dropping shadow</title>  
 </head>  
 <body>  
 <h2>Example of Drop Shadow art</h2>  
 <svg height="130" width="130">  
   <defs>  
     <filter id="filter" x="0" y="0">  
       <feGaussianBlur stdDeviation="5" />  
       <feOffset dx="5" dy="5" />  
     </filter>  
   </defs>  
   <rect width="110" height="110" fill="lightgray" filter="url(#filter)" />  
   <rect width="100" height="100" fill="blue" stroke="green" stroke-width="4" />  
   Syour browser does not support inline SVG.  
 </svg>  
 </body>  
 </html>

Patterns in SVG

Pattern can be developed or made from SVG images or the SVG shapes in SVG. It can also be made from bitmap images, the structure of SVG pattern is like tiles which are made in Photoshop. The main purpose of SVG fill patterns is to fill a shape with a pattern which is made from images.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>SVG Example</title>  
 </head>  
 <body>  
 <h2>A Basic Example of Pattern</h2>  
 <svg width="120" height="120" viewBox="0 0 120 120">  
   <defs>  
     <pattern id="Triangle"  
          width="10" height="10"  
          patternUnits="userSpaceOnUse">  
       <polygon points="5,0 10,10 0,10"/>  
     </pattern>  
   </defs>  
   <circle cx="60" cy="60" r="50"  
       fill="url(#Triangle)"/>  
 </svg>  
 </body>  
 </html>

Gradient in SVG

A gradient can be well said as a smooth transition which occurs between one color to another one and vice-verse. There are several color transitions which are applicable to one element. On SVG there are two types of SVG gradients and they are Linear and Radial.The LineraGradient element is used for the purpose of describing and defining linear gradient.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
 <meta charset="UTF-8"/>  
 <title>SVG Example</title>  
 </head>  
 <body>  
 <h2>An Example of Linear Gradient</h2>  
 <svg height="200" width="300">  
 <defs>  
 <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">  
 <stop offset="0%" style="stop-color:green;stop-opacity:0.5" />  
 <stop offset="50%" style="stop-color:blue;stop-opacity:1" />  
 <stop offset="70%" style="stop-color:yellow;stop-opacity:1" />  
 <stop offset="80%" style="stop-color:red;stop-opacity:1" />  
 <stop offset="5%" style="stop-color:brown;stop-opacity:0.5" />  
 </linearGradient>  
 </defs>  
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#linearGradient)" />  
 <text fill="yellow" font-size="19" font-family="Verdana" x="130" y="90">  
     Linear Gradient</text>  
 </svg>  
 <h2>An Example of Radial Gradient</h2>  
 <svg height="200" width="300">  
 <defs>  
 <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">  
 <stop offset="10%" style="stop-color:yellow;stop-opacity:0.5" />  
 <stop offset="50%" style="stop-color:#E6E12F;stop-opacity:1" />  
 <stop offset="70%" style="stop-color:green;stop-opacity:1" />  
 <stop offset="80%" style="stop-color:red;stop-opacity:1" />  
 <stop offset="10%" style="stop-color:orange;stop-opacity:0.5 stroke-width:2" />  
 </radialGradient>  
 </defs>  
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#radialGradient)" />  
 <text fill="black" font-size="14" font-family="Verdana" x="150" y="70">  
     Radial Gradient</text>  
 </svg>  
 </body>  
 </html>

Filters in SVG

Main functionality of the SVG filters are to add special effects to the SVG graphics. There are many SVG filters elements which have different functions and some of them are <feBlend> which is responsible for filtering the images which are combines and <feColormatrix> which is responsible for transforming colors.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>SVG Example</title>  
 </head>  
 <body>  
 <h2>An Example on Filter</h2>  
 <svg height="150" width="150">  
   <defs>  
     <filter id="filter1" x="0" y="0">  
       <feGaussianBlur in="filt" stdDeviation="15" />  
     </filter>  
   </defs>  
   <rect width="110" height="110" stroke-width="2" fill="darkgreen" filter="url(#filter1)" />  
   Your browser does not support inline SVG.  
 </svg>  
 <svg height="130" width="130">  
   <defs>  
     <filter id="filter" x="0" y="0">  
       <feGaussianBlur stdDeviation="5" />  
       <feOffset dx="5" dy="5" />  
     </filter>  
   </defs>  
   <rect width="110" height="110" fill="lightgray" filter="url(#filter)" />  
   <rect width="100" height="100" fill="blue" stroke="green" stroke-width="4" />  
   Syour browser does not support inline SVG.  
 </svg>  
 </body>  
 </html>

Drawing a rectangle in SVG

SVG has many predefined shape elements which can be used by the developers and designers , one of them is <rect> . <rect> element of the SVG is used to create rectangle. It can also be used for the creation of variations of rectangle shapes.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
 <meta charset="UTF-8"/>  
 <title>SVG Example</title>  
 <style>  
 rect{  
 fill:green;  
       stroke-width:4;  
 stroke:red;  
     }  
 </style>  
 </head>  
 <body>  
 <h2>SVG Rectangle </h2>  
 <svg width="700" height="600">  
 <rect width="250" height="90"/>  
 <rect x="80" y="110" width="250" height="150"/>  
 <rect x="180" y="270" rx="40" ry="50" width="250" height="150" />  
 </svg>  
 </body>  
 </html>

Eclipse in SVG

An ellipse can is very similar to circle but it not completely same because the radius in circle is same but in ellipse the radius x and the radius y is different in length. The <ellipse> element is used for the creation of ellipse.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8">  
   <title>SVGTutorials</title>  
 </head>  
 <body>  
 <h2>An Example of Ellipse</h2>  
 <svg height="160" width="500">  
   <ellipse cx="300" cy="90" rx="110" ry="60" style="fill:#caff9e;stroke:#d2d2d2;stroke-width:5" />  
   Your browser does not support inline SVG.  
 </svg>  
 <svg height="150" width="500">  
   <ellipse cx="220" cy="100" rx="220" ry="26" style="fill:#009600" />  
   <ellipse cx="210" cy="70" rx="190" ry="18" style="fill:#70a5ff" />  
   <ellipse cx="220" cy="45" rx="170" ry="12" style="fill:#ff9046" />  
 </svg>  
 </body>  
 </html>

Circle in SVG

SVG Circle is different from ellipse because the entire radius in a circle has same length but in ellipse the case is not same as the radius x and y has two different lengths. The <circle> element in SVG is used for the creation of a circle.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
 <meta charset="UTF-8"/>  
 <title>SVG</title>  
 </head>  
 <body>  
 <h2>Example of SVG Circle </h2>  
 <svg height="200" width="200">  
 <circle cx="100" cy="100" r="80" stroke="yellow" stroke-width="3" fill="green" />  
 </svg>  
 </body>  
 </html>

SVG Line

The purpose of <line> element in SVG is for creation line or lines. In a simple line x1 attribute describes and defines the start of the line on x-axis. The y1 attribute whereas describes the start of the line on Y-axis. The attributes x2 and y2 describes the end of lines on both x-axis and y-axis respectively.

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
 <meta charset="UTF-8"/>  
 <title>SVG Line</title>  
 <style>  
     line{  
        stroke-width:3;  
 stroke:green;  
     }  
 </style>  
 </head>  
 <body>  
 <h2>Sample SVG Line </h2>  
 <svg height="700" width="600">  
 <line x1="0" y1="0" x2="200" y2="300" />  
 <line x1="80" y1="10" x2="300" y2="400" />  
 </svg>  
 </body>  
 </html>

What is SVG ?

SVG stands for Scalable Vector Graphics and it is an XML-based vector image format which is needed for two-dimensional graphics providing support for animation and also for interactivity.All the present popular browsers such as Chrome, Safari and Mozilla all contain at least some degree of SVG rendering support. It was initially released in the year 2001 on 4th of September. The development of SVG was done by W3C and it is an open standard. Example:

<!DOCTYPE html>  
 <html>  
 <head lang="en">  
 <meta charset="UTF-8">  
 <title>SVG</title>  
 <style>  
 svg{  
  background:green;  
 }  
 </style>  
 </head>  
 <body>  
 <header style="background:grey;width:400px;text-align:center;margin:auto;">  
 <h1>SVG Example</h1>  
 <p>simple SVG example</p>  
 </header>  
 <div style="margin:auto; background:grey;">  
 <svg width="200" height="200">  
 <circle cx="100" cy="100" r="80" stroke="red" stroke-width="2" fill="blue" />  
 <circle cx="100" cy="100" r="60" stroke="red" stroke-width="2" fill="green" />  
 <circle cx="100" cy="100" r="40" stroke="red" stroke-width="2" fill="black" />  
 <circle cx="100" cy="100" r="20" stroke="red" stroke-width="2" fill="white" />  
 Your browser does not support SVG.  
 </svg>  
 <svg width="300" height="200">  
   <ellipse cx="150" cy="100" rx="100" ry="10" style="fill:red;" />  
   <ellipse cx="150" cy="80" rx="80" ry="10" style="fill:blue;" />  
   <ellipse cx="150" cy="60" rx="60" ry="10" style="fill:yellow;" />  
 </svg>  
 </div>  
 </body>  
 </html>

nirajanghimireyworkshop

Sunday, March 22, 2015

Friday, March 13, 2015