EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials Software Development Basics SVG Creator

SVG Creator

Updated February 21, 2023

SVG Creator

Introduction to SVG Creator

SVG creator is a free, open-source online tool that is compatible with all types of browsers, or we can say that we can run SVG smoothly. It is used to edit the graphics images within a specified web browser area as per our requirement without third-party tools or software. In SVG creator, we can create or display two-dimensional images and different types of charts on websites. We can also display the vector files that are helpful to scale the image without harming any resolution of images; this is one of the advantages of SVG creator.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

SVG Creator overviews

Versatile Vector Graphics (SVG) is an XML-based vector picture design for two-layered illustrations with the help of intelligence and activity. The SVG creator is an open-source, free tool that 3W builds.

SVG pictures are characterized in a vector design and put away in XML text documents. SVG pictures can, in this manner, be scaled in size without loss of value, and SVG records can be looked at, filed, prearranged, and compacted. Furthermore, the XML text documents can be made and altered with word processors or vector illustration editors and are delivered by the most-utilized internet browsers.

Svg Creator Attributes

Now let’s see the different attributes of SVG creator as follows.

SVG circle: This is an attribute of SVG and is used to draw the circle with a given point and radius.

Syntax

<circle
cx ="It is used to specify the value of X axis coordinate"
cy="It is used to specify the value of Y axis coordinate"
cr="It is used to specify the length if radius">
</circle>

Explanation

In the above syntax, we use three different attributes as shown here circleX, and circleY are used to specify the X and Y coordinates of the circle, which means point; the cr is used to define the circle’s radius.

Example

Now let’s see an example of a circle element so we will get the idea about the attribute as follows.

<html>
<title>Welcome in SVG Circle Element</title>
<body>
<h1>Sample demo Image of SVG Circle</h1>
<SVG width="700" height="700">
<g>
<text x="15" y="11" fill="red" >Sample Demo Circle:1: Without any opacity.</text>
<circle cx="150" cy="150" r="60" stroke="green"
stroke-width="4" fill="rgb(124,0,124)"></circle>
</g>
</SVG>
</body>
</html>

Explanation

In the above example, we try to implement the SVG circle element as shown; here, we use the three attributes, cx, cy, and r, that we already discussed. Furthermore, in this example, we try to draw the circle without any opacity. Finally, we illustrated the final output of the above implementation by using the following screenshot.

SVG Creator output 1

Now let’s see the same example with opacity as follows.

<html>
<title>Welcome in SVG Circle Element </title>
<body>
<h1>Sample demo Image of SVG Circle with opacity</h1>
<SVG width="700" height="700">
<g>
<text x="15" y="11" fill="red" >Sample Demo Circle:1: With opacity.</text>
<circle cx="150" cy="150" r="60" stroke="green"
style="fill:rgb(124,0,124);stroke-width:4;
stroke:rgb(0,0,0);stroke-opacity:0.8;opacity:0.8"></circle>
</g>
</SVG>
</body>
</html>

Explanation

In the above example, we try to draw the circle with opacity; here, we add one more attribute, stroke-opacity with value, as shown in the above code. Finally, we illustrated the final output of the above implementation by using the following screenshot.

SVG Creator output 2

Now let’s see the SVG view box attribute example as follows.

One more method for clarifying it is that the two first organizations in the viewBox quality characterize the client directions of the upper left corner of the <SVG> component, and the two last facilitates characterize the client directions of the lower right corner. The space inside the <SVG> is deciphered as spreading over from the upper passed directions to the lower right facilitates the view box.

<!DOCTYPE html>
<html>
<head>
<title>SVG With ViewBox</title>
<style type="text/css">
SVG {
border: 2px solid #bbb;
}
</style>
</head>
<body>
<!-- Code for without viewBox -->
<SVG width="250" height="250">
<circle cx="55" cy="55" r="50"
stroke="#011" stroke-width="4"
fill="none"/>
</SVG>
<!-- Code for with viewBox -->
<SVG width="150" height="150" viewBox="0 0 30 30">
<circle cx="20" cy="30" r="10" stroke="#000"
stroke-width="2" fill="none"/>
</SVG>
</body>
</html>

Explanation

In this example, the square box shows the outline of SVG with viewbox and without viewbox attribute. The output above both codes is the same, but the only difference is in scale or dimension. In this example, we use four attributes shown in the above code, such as X and Y coordinate with width and Height. We illustrated the final result of the above implementation using the following screenshot.

output 3

Now let’s see the SVG rectangle example as follows.

Example

<!DOCTYPE html>
<html>
<head>
<title>Welcome in SVG Rectangle</title>
<style type="text/css">
SVG {
border: 2px solid #bbb;
}
</style>
</head>
<body>
<SVG width="300" height="150">
<rect width="300" height="150" stroke="green" stroke-width="3" fill="yellow" />
</SVG>
</body>
</html>

Explanation

In the above example, we try to draw the rectangle; here, we use two attributes, width, and height, to draw the rectangle. In this example, we define the width as 300 and the height as 150. We illustrated the final result of the above implementation using the following screenshot.

output 4

Now let’s see an example of the polygon as follows.

Example

<!DOCTYPE html>
<html>
<head>
<title>Welcome in SVG Polygon</title>
<style type="text/css">
SVG {
border: 2px solid #bbb;
}
</style>
</head>
<body>
<SVG height="220" width="250">
<polygon points="101, 11 41,199 191,79 11,79 161,199"
style="fill:green; stroke: orange; stroke-width:4;fill-rule:zero;" />
</SVG>
</body>
</html>

Explanation

In the above example, we try to implement the polygon; in this example, we define the different attributes to draw the polygon as shown in the above code. We illustrated the final result of the above implementation using the following screenshot.

output 5

So in this way, we can create SVG by using different elements and attributes per our requirement.

Conclusion

We hope from this article you learn more about the SVG creator. From the above article, we have taken in the essential idea of the SVG creator, and we also see the representation and example of the SVG creator. Furthermore, this article taught us how and when to use the SVG creator.

Recommended Articles

This is a guide to SVG Creator. Here we discuss the essential idea of the SVG creator, and we also see the representation and example. You may also look at the following articles to learn more –

  1. Inkscape SVG
  2. React Native SVG
  3. What is SVG?
  4. CentOS Version
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more