Go Back   Wiki NewForum > Career Forum (Documents/Tutorials/Advice) > Tech Forum & Tutorial > IT Forum

Reply
Views: 2505 Source: CNN18.com, India-Forums, TellyChakkar, India, Times of India, Youtube, BollywoodLife, Rediff  
Thread Tools Rate Thread Display Modes
  #6  
Old 05-03-2009, 03:56 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,085
Default SVG <ellipse>

The tag is used to create an ellipse.
The Tag

The tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:



"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

Code explanation:
  • The cx attribute defines the x coordinate of the center of the ellipse
  • The cy attribute defines the y coordinate of the center of the ellipse
  • The rx attribute defines the horizontal radius
  • The ry attribute defines the vertical radius


The following example creates three ellipses on top of each other:





"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:purple"/> style="fill:lime"/> style="fill:yellow"/>

The following example combines two ellipses (one yellow and one white):

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:yellow"/> style="fill:white"/>
Ads
Reply With Quote
  #7  
Old 05-03-2009, 03:56 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,085
Default SVG <line>

The tag is used to create a line.
The Tag

The tag is used to create a line.


Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:





"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="stroke:rgb(99,99,99);stroke-width:2"/>

Code explanation:
  • The x1 attribute defines the start of the line on the x-axis
  • The y1 attribute defines the start of the line on the y-axis
  • The x2 attribute defines the end of the line on the x-axis
  • The y2 attribute defines the end of the line on the y-axis
Reply With Quote
  #8  
Old 05-03-2009, 03:57 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,085
Default SVG <polygon>

The tag is used to create a graphic that contains at least three sides.
The Tag

The tag is used to create a graphic that contains at least three sides.


Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web directory:





"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

Code explanation:
  • The points attribute defines the x and y coordinates for each corner of the polygon


The following example creates a polygon with four sides:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
Reply With Quote
  #9  
Old 05-03-2009, 03:58 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,085
Default SVG <path>

The tag is used to define a path.
The Tag

The tag is used to define a path.
The following commands are available for path data:
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.


Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:





"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg">



The example above defines a path that starts at position 250 150 with a line to position 150 350 then from there a line to 350 350 and finally closing the path back to 250 150.


The following example creates a spiral:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:white;stroke:red;stroke-width:2"/>
Reply With Quote
  #10  
Old 05-03-2009, 04:00 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 39,085
Default SVG Filters

SVG Filters is used to add special effects to shapes and text.
SVG Filters

The available filters in SVG are:
  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight
You can use multiple filters on each SVG element!
Reply With Quote
Reply

New topics in IT Forum

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Forum Jump


Powered by vBulletin® Version 3.8.10
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
asp web stats