MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • BLOGGING
    • SEO
    • BlogSpot
    • WORPRESS
    • GOOGLE
    • COMPUTER TIPS
  • WEB DESIGN
    • HTML
    • CSS
    • BOOTSTRAP
    • JAVASCRIPT
    • JQUERY
  • WEB DEVELOPMENT
    • PHP
    • WORDPRESS
  • MAKE MONEY
    • ONLINE BUSINESS
    • ADSENSE
    • AFFILIATE MARKETING
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Thursday, January 10, 2019

How to use svg tag in html5?

 MyBlogHelp     January 10, 2019     html     No comments   

html5 svg tag
USE OF HTML5 SVG TAG

HTML5 <svg> Tag

In addition to HTML5 Canvas, SVG technology is also used to define graphics on any web page. The full name of SVG is Scalable Vector Graphics. This is an XML-based image format. SVG is used to draw two-dimensional vector-based graphics in web pages.

World Wide Web Consortium (W3C) only recommends SVG technology to draw graphics on a web page. SVG provides several methods to draw paths, boxes, circles, text and graphics images.

Advantages of SVG

Some advantages of the SVG are given below.

1. SVG images and their presentation are defined in the XML file. This means that SVG images can be edited through an editor.

2. One particular thing about SVG images is that their quality does not get worse even after zooming too much.

3. SVG images can be searched and indexed by web engines.

4. SVG images can be dynamically modified by javascript.

5. It is possible to print SVG images with high quality at any resolution.

6. With SVG you have built-in animation elements through which SVG images can be animated.

7. All browsers support SVG like other formats such as JPEG, PNG, and GIF etc. So, you can be sure to use it in your webpages.

Difference between Canvas and SVG

Both SVG and Canvas are used to draw graphics on the webpage. You need to know the difference between these for using properly. The difference in the lower SVG and Canvas is explained as below.

1. SVG is vector-based. These are defined by math and made up of different shapes. The graphics drawn by canvas is raster-based and is composed of pixels.

2. SVG contains multiple graphical elements that can be accessed through the DOM. Canvas represents one single HTML. This is like the <img> tag.

3. SVG can be modified with the script as well as CSS. It is not possible to modify the canvas graphics by CSS.

4. The quality of the SVG does not get worse when zooming. When the Canvas graphics zoom, these look blurry.

5. SVG can be printed on high resolution. Canvas graphics can't be printed on high resolution.

6. Drawing SVG graphics is easier and more beneficial than drawing on the canvas because this does not require you to create any type of script. The speed of the page decreases from Scripts, which is not well suited for SEO point of view. SVG can be designed by CSS as any normal HTML element.

HTML5 <svg> Tag Syntax 

<svg> tag of HTML5 works as a container for SVG. Graphics are drawn using different tags and attributes in this container. Its simple syntax is given below.

<svg width = "" height = "">
<graphics tags and its attributes>
</ svg>

When defining SVG container it is necessary to define its width and height. There are different graphics tags are available to create graphics in the <svg> container.

1. <line> - draw a line.
2. <circle> - draw a circle.
3. <rect> - draw a rectangle.
4. <polygon> - draw a polygon
5. <text> - draw a text.

Like the canvas, the coordinates of the <svg> container also have the origin, top, left and the corner. Therefore, you define cx and cy attributes by the distance from left to left and top respectively. Also, "fill" attribute is used to fill the graphics.

How to use svg tag in html5?

<svg> Examples in HTML5 

An example of drawing a circle through <svg> is given below.

<html>
<body>
<head> 
      <title>Example draw a Circle</title>
</head>        
<svg height = "200" width = "200">
<circle cx = "100" cy = "100" r = "80" fill = "red">
</ svg>
</ body>
</ html>

In the above example, the r attribute circle has been used to define the radius. This example produces the below output.

Cirlce SVG example
Drawing circle SVG example

An example of drawing a line through <svg> is given below.

<!DOCTYPE html>
<html>
<body>
<head> 
      <title>Example draw a Line</title>

</head>
<svg height = "600" width = "600">
<line x1 = "50" y1 = "50" x2 = "200" y2 = "200" style = "stroke: rgb (0,255,0); stroke-width: 3;">
</ svg>
</ body>
</ html>

In the above example, a line is drawn in the <svg> container. Start and end points of the line are defined to draw the line. Those defined by x1, y1, x2, y2 Line is defined by stroke property of CSS and stroke-width property of width CSS. This example produces the output below.

Line SVG example
Drawing line SVG example

An example of drawing a rectangle by SVG is given below.

<!DOCTYPE html>
<html>
<body>
<head> 
      <title>Example draw a Rectangle</title>

</head>
<svg width = "200" height = "200">
<rect x = "50" y = "50" width = "100" height = "50" style = "fill: red; stroke: black; stroke-width: 2;">
</ svg>
</ body>
</ html>

In the above example, used fill property is used to define what is to fill the drawn graphic with a color. This example produces the output below.


Rectangle SVG Example
Drawing a Rectangle with SVG
An example of drawing a polygon through <svg> is given below.


<!DOCTYPE html>
<html>
   <body>
      <head>
            <title>Example of Polygon</title>
       </head>
           <svg height="300" width="600">
               <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;"/> 
           </svg>
    </body>

</html>

This example produces the output below.


SVG POLYGONE EXAMPLE
SVG POLYGON EXAMPLE


An example of drawing a text through <svg> is given below.

<!DOCTYPE html>
<html>
  <body>
     <svg height="200" width="200">
         <text x="0" y="20" fill="red" transform="rotate(60 30,50)">SVG is Graphic Tag in HTML5</text>
     </svg>

     <svg height="200" width="200">
        <text x="30" y="30" style="fill:blue;">There are three lines below:
       <tspan x="30" y="50">This is a First line.</tspan>
       <tspan x="30" y="70">This is a Second line.</tspan>
       <tspan x="30" y="90">This is a Third line.</tspan>
       </text> 
    </svg>
</body>
</html>

This example produces the output below.

SVG TEXT EXAMPLE
SVG TEXT EXAMPLE



              << PREVIOUS                                                                                              NEXT >>





  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 comments:

Post a Comment

Thank you for reading the post.

Blog Archive

  • ▼  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ▼  January (16)
      • What is bootstrap and its major advantages of crea...
      • What is CSS? CSS Tutorial 01
      • How to use input attributes in html5?
      • How to use input type in html5?
      • How to use output tag in html5?
      • How to use keygen tag in html5?
      • How to use datalist tag in html5?
      • How to use svg tag in html5?
      • How to use canvas tag in HTML5?
      • How to use the track tag in html5?
      • How to use source tag in html5?
      • How to use embed tag in html5?
      • How to use the main tag in html5?
      • How to use Ruby tag in html5?
      • How to use html5 mark tag to highlight text?
      • How to use html5 footer tag?
  • ►  2018 (54)
    • ►  December (27)
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?
  • Top 10 Plagiarism Checker Website Which Provides Free Online Tool to Check Copyright Content

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the post, we share on this blog related to SEO, Blogging, BlogSpot(Blogger), Wordpress, Online Business, Online Make Money, Online Earnings, Training tutorials such as HTML, CSS, Bootstrap, JavaScript, PHP, and Computer Tips.

Featured Post

How to use keygen tag in html5?

Follow by Email

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development | Powered by Blogger
Design by Md. Abdussamad | Blogger Theme by MyBlogHelp.com