TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

HTML SVG

HTML svg or html 5 svg tag with examples, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.

<< Back to HTML

HTML SVG

The HTML SVG is an acronym which stands for Scalable Vector Graphics.

HTML SVG is a modularized language which is used to describe graphics in XML. It describe two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C recommendation. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor, but generally drawing programs like inkspace are preferred to create it.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.

The <svg> element specifies the root of a SVG fragment. You can animate every element and every attribute in SVG files.

HTML SVG Circle Example

Let's see the example to draw circle by svg tag.

   <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
   </svg>

Here, we are using cx, cy and r attributes of circle tag. These attributes can't be used with svg rect tag.

Test it Now

Output:

HTML SVG Rectangle Example

Let's see the example to draw rectangle by svg tag.

<svg width="200" height="100">
  <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
</svg>

Here, we are using width and height attributes of rect tag.

Test it Now

Output:

HTML SVG polygon Example

Let's see the example to draw polygon by svg tag.

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
</svg>

Here, we are using points attribute of polygon tag.

Test it Now

Output:

Why SVG is preferred over other image formats?

SVG images can be saved as the smallest size possible. Unlike bitmap image formats like JPG or PNG, it does not contain a fixed set of dots. So it is also easy to print with high quality at any resolution.

SVG images can be zoomed to a certain level without degradation of the picture quality.

SVG images and their behaviors are defined in XML text files, so they can be created and edited with any text editor.

Next TopicHTML canvas




Related Links:

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf