Mindroast
Published in

Mindroast

SVG Tutorial Series: SVG Elements | Part 2

SVG is a language based on XML. SVG also supports dynamic changes based upon screen size and the image does not get pixelated.

1. The ‘rect’ element.

A “rect” element is used to draw a rectangle. We have the following property that can be played to draw a rectangle.

  • x — Left top coordinate of the element, that can be used to draw the diagram (x-axis).
  • y — Left top coordinate of the element, that can be used to draw the diagram (y-axis).
  • width — Width of our rectangle.
  • height- Height of our rectangle.
  • rx — Rounded corner (x-axis).
  • ry — Rounded corner (y-axis).
<h2>SVG Rectangle.</h2>   
<svg width="400" height="400">
<rect width="400"
height="100"
fill="red"
stroke-width="1"
stroke="rgb(0,0,0)"/>
</svg>
SVG Rect

2. The ‘circle’ element

As the name suggests this circle element property is used to draw a SVG circle diagrams.

  • cx — The x coordinate of the center of the circle.
  • cy — The y coordinate of the center of the circle.
  • r — The r is the radius of the circle.
<h2> SVG Circle Element</h2>  
<svg style="border:1px solid black" width="400" height="400"> <circle
cx="200"
cy="200"
r="40"
stroke="black"
stroke-width="4"
fill="none" />
</svg>
SVG Circle

3. The ‘polygon’ element

The polygon SVG element is the one that is used to draw any shape with any number of the side as you want to draw in your SVG.

Polygon SVG element is a unique element that can be used to draw.

<h2> Polygon</h2>
<svg style="border:1px solid black" width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" fill="red" stroke="purple"
stroke-width="5" />
</svg>
SVG Polygon

4. The ‘path’ SVG element

The path SVG element is the kind of all the elements, if you are aware of how the path element work, you are good enough to work on any kind of styling. You can create a circle, rectangle, ellipses, etc using your path element.

Let’s take an example.

<h2> SVG Path Element</h2> 
<svg style="border:1px solid black"

width="300"
height="200">
<path d="M50 0 V100 H100"
fill="none"
stroke-width="5"
stroke="purple">
</path>
</svg>
SVG Path

Since you need to understand the path element and you will be able to draw any element using the diagram any SVG animations using that. This blog is part of a bigger series of SVG tutorials, next video link will be added in the section below.

Link to the other blogs. - 
- 1. Yet to be added.
- 2. SVG Tutorial Series: SVG Elements | Part 2

About The Author

Apoorv Tomar is the Software developer and founder of Mindroast. You can connect with him on Twitter, Linkedin, and Instagram.

Originally posted here: Click to reach

--

--

--

Mindroast helps the readers to remain informed about the life lesson, technology and grow as a human, both morally and professionally.

Recommended from Medium

Demystifying the Dependency Inversion Principle in Angular

ExtJs 4 — Running docs over IIS in Windows — Rahul Singla

Scalable React: A Proposal with Lerna

Finding the Possible palindromes from a given string

How to Use Bitcoin Based Blockstack Auth in Your iOS Apps

Concept Of React JSX and Hooks(Basic)

JavaScript Arrow Function Magic

Playing with Playwright

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Apoorv Tomar

Apoorv Tomar

Mindroast 🇮🇳, Techie 🖥️, Wanderer🤔, Traveller ✈️, Buy me a coffee https://www.buymeacoffee.com/apoorvtomar ☕ Subscribe to Newsletter: https://mindroast.com/

More from Medium

API First

Top Best 6 java full stack courses

Visualising Factory Pattern, Abstract Factory Pattern with use case in Java

My Journey with Software Development!