• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
EDUCBA

EDUCBA

MENUMENU
  • Resources
        • Java Tutorials

          • Cheat Sheet Java
          • Cheat Sheet Python
          • C# vs Js
        • Java Tutorials
        • Python Tutorials

          • Angular 5 vs Angular 4
          • Careers in Python
          • Kali Linux vs Ubuntu
        • Python Tutorials
        • Top Differences

          • Cheat Sheet JavaScript
          • Python Interview Questions
          • Cloud Computing or Virtualization
        • Top Differences
        • Others

          • Resources (A-Z)
          • Top Interview Question
          • Programming Languages
          • Web Development Tools
          • HTML CSS Tutorial
          • Technology Basics
          • Technology Careers
          • View All
  • Free Courses
  • All Courses
        • Certification Courses

          Software Development Course 2
        • All in One Bundle

          All-in-One-Software-Development-Bundle
        • Become a Python Developer

          Python-Certification-Training
        • Others

          • Java Course
          • Become a Selenium Automation Tester
          • Become an IoT Developer
          • Ruby on Rails Course
          • Angular JS Certification Training
          • View All
  • 600+ Courses All in One Bundle
  • Login

What is SVG?

Home » Software Development » Blog » Software Development Basics » What is SVG?

What is SVG?

Introduction to SVG

There are several formats in which images could exist that varies based on the characteristics of the image. The image might be an opaque image, the transparent one and so on, and all such features of the images can be defined by the format it has. Some of the very commonly used formats of images are JPEG, PNG, GIF, etc. Among the various formats, there is an important one that is created using the line of code in XML or HTML, called SVG. In this article, we will be learning about SVG, how it is created, what are the extras this format has and things like that. Though it is not the commonly used format of the images, it plays an important role in the contemporary web application that demands quality together with an attractive interface.

Definition of SVG

SVG stands for Scalable Vector Graphics. It can be defined as the format of images that are produced using the XML or HTML tags. It is very useful to design two-dimensional graphics and can improve the users’ interaction experience. It was developed by World wide web consortium twenty years back in 1999. The latest version of SVG is 1.1 which was released in 2011. It is very different from the images of other formats as those required graphic designing applications to be designed but the graphics with SVG extension are actually developed using the codes or tags. It is very interactive and can allow the two-dimensional graphics to be designed.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

An important point one should know about scalable vector graphics is that it cannot be downloaded similarly to JPEG or PNG format images. When we download images with JPEG or PNG extension, it saves a copy of the image that can be edited using the graphical designing tools like adobe photoshop, paint, etc while the SVG image will be required to be edited by changing the codes. In the modern era, where web applications are supposed to be perfect in every manner, the SVG graphics add amazing quality to it. From designing merely a circle to designing a complex graphic, one needs to use the tags if they want the graphic to be developed using SVG.

How does SVG make Working so Easy?

There are several points where SVG actually makes things very easy. As we discussed earlier, it is very useful when it comes to designing the web application that is supposed to have an amazing outlook. The graphics created with the SVG format makes it very interactive for the user to work with the application. It is very useful when you are required to use the graphical component anywhere on the web application. Together with the HTML codes, one has to write the SVG tag in order to bring its functionality in the webpage. If one wants to draw the simple interface, it could be done in few numbers of the line but in case if the graphics are supposed to be a bit complex than it will demand a long HTML or XML code to be written. By integrating the simpler graphical components like a circle, square, rectangle and so on, one can design a complex graphics.

Working with SVG

In order to learn how to work with SVG, we will be going through the line of codes that has to be written in order to develop the SVG graphics. We will be considering an example, where we will be designing a simple circle with a red color filled in it and with a black border. We will be writing codes in HTML and will be using the SVG tag to introduce the graphics in the web page.

codes in HTML

In the above code, we have written the SVG graphics using the SVG tag and its important attributes. In the first line with the SVG tag, we have mentioned the width and the height of the circle. In the second line, we have used the circle tag which can be used as the subtag under the SVG tag. Cx is the attribute of the circle tag that is used to defined how many pixels that circle has to cover in the x-axis. Cy is the attribute of the circle tag that is used to define how many pixels that circle has to cover in the y-axis. The attribute r defines the radius of the circle.

Popular Course in this category
All in One Software Development Bundle (600+ Courses, 50+ projects) 600+ Online Courses | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (3,144 ratings)
Course Price

View Course

Related Courses
Software Testing Training (11 Courses)Selenium Training Certification (9 Courses, 4+ Projects)Appium Training (2 Courses)JMeter Certification Training (3 Courses)

Stroke defines the color of the border which is black in our case. The next attribute stroke-width defines the width of the circle that one can provide in pixels. The last attribute of the circle tag is filled that is used to define which color has to be filled in the circle. We have chosen red so in the output you will be able to see that the circle has the red color filled in it. If you want to work with the SVG code, you can just copy the code from the above image, save it with HTML extension and see what you find as output. You can keep them modifying to learn or explore more.

Required Skills

In order to work with SVG, you should know how to work with the HTML tags. In HTML, it is implemented using the SVG tag which further has the subtags that can be used under the SVG tag in order to design the graphics. If you have already worked as a web application designed, you may find it easy to work with SVG. Though it is not all about giving structure to the page to changing the look of the HTML elements, you will need a bit of practice before you can start working with SVG. If you have a good idea of graphics designing, it will add an edge to make you work with or learn SVG in a short span of time.

Conclusion

Scalable Vector Graphics are the special format of images that has two-dimensional graphics. Based on the requirement, one can use images with any of the formats but using SVG it will be a bit different as it is developed using the lines of codes rather than using the graphic designing tools. It is mainly used in the web application as it has to be written using the XML or the HTML tag. One can make use of it to make the web application pretty interactive to enhance the users’ experience.

Recommended Articles

This is a guide to What is SVG. Here we discuss the definition, concepts, working and how SVG makes work easy. You can also go through our other suggested articles to learn more –

  1. Grid Layout in Java
  2. PHP String Functions
  3. Applications of HTML
  4. Career in ASP.NET

All in One Software Development Course Bundle

600+ Online Courses

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Reader Interactions
Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar
Technology Blog Tutorials
  • Software Development Basics
    • Interoperability Testing
    • Code Coverage
    • Test Plan Template
    • Domain Testing
    • Sanity Testing
    • React Tools
    • What is Switch?
    • Adhoc Testing
    • Equivalence Partitioning
    • Recovery Testing
    • Software Development
    • Black Box Testing Techniques
    • What is XPath?
    • Listeners in TestNG
    • Array vs ArrayList
    • Git Checkout
    • Haskell Alternatives
    • What is Polymorphism?
    • TestNG Annotations
    • Unix File System
    • Shell Script Parameters
    • Software Quality Assurance
    • What is SDET?
    • UML Deployment Diagram
    • Fuzz Testing
    • What is Defect?
    • Automation Testing
    • Static Testing Techniques
    • Install GRUB
    • Spike Testing
    • Exception Handling in VB.NET
    • Unix File Permissions
    • Mutation Testing
    • What is a Bug in Software Testing?
    • Mantis Bug Tracker
    • Compatibility Testing
    • Components of Selenium
    • Overriding in OOPs
    • Iterator in C++
    • Free Web Hosting Sites
    • Interface Testing
    • Dynamic Testing
    • Non Functional Testing
    • Regression Testing Tools
    • Scalability Testing
    • Volume Testing
    • Negative Testing
    • Performance Testing Life Cycle
    • What is XPath in Selenium?
    • What is Test Automation Frameworks?
    • Bootstrap Typography
    • What is Laravel?
    • Hive Built-in Functions
    • Stability Testing
    • Levels of Software Testing
    • Software Testing Life Cycle
    • Types of Domain
    • VB.NET Controls
    • Types of Websites
    • What is Cucumber?
    • Best C Compilers
    • Manual Testing
    • UML Component Diagram
    • What is Stress Testing?
    • What is Debugging?
    • Test Harness
    • Diffie Hellman Key Exchange Algorithm
    • What is Functional Testing?
    • Constructor in C++
    • TFTP
    • What is Web Hosting?
    • Types of Software Testing
    • Benchmark Testing
    • UML Diagram Softwares
    • UML Object Diagram
    • Test Coverage
    • Gantt Chart Software
    • What is FTP?
    • Static Testing
    • Python Frameworks
    • What is Usability Testing?
    • HTTP Cookies
    • RMI Architecture
    • Selenium Architecture
    • Defect Tracking Tools
    • Performance Testing Tools
    • Monolithic Kernel vs MicroKernel
    • Cryptosystems
    • IPv6 Header Format
    • What is Cross Site Scripting?
    • User Datagram Protocol
    • SOA Testing
    • Test Case Design Techniques
    • What is SVN?
    • What is Debian?
    • Bootstrap Components
    • Bootstrap Layout
    • Windows Commands
    • Kotlin Functions
    • DBMS Keys
    • Selenium Grid
    • Selenium Tools
    • List of few Errors In Website
    • Introduction To GIT
    • Internet of Things (IoT) Applications
    • Is Cassandra NoSQL
    • What is OLTP?
    • Introduction To Algorithm
    • What is Juypter Notebook
    • Git Alternatives
    • Introduction To Android
    • GitHub Alternatives
    • Introduction to Windows
    • What is an Algorithm
    • What is Maven
    • What Is Apache
    • What Is SDLC
    • Sharepoint Alternatives
    • Selenium Alternatives
    • What is Selenium
    • What is Shell Scripting
    • What is Mainframe
    • What is Software Development
    • What is Git
    • What is Computer Science
    • Uses Of Powershell
    • What is SSRS
    • What is Application Server
    • What is RMAN Oracle
    • What is Virtual Host
    • What is Desktop Software
    • System Design Interview Questions
    • What Is System Design
    • What Is Design Pattern
    • What is MVC Design Pattern
    • System Analysis And Design
    • Application Software & Types
    • Learn the Art of Mechatronics
    • Myths & Misconceptions Software
    • Solve Problems With Technology
    • Avoid Pitfalls of Shadow
    • Learn to Code For Beginners
    • Software as a Service (Saas)
    • Freelance Web Designer
    • CISA Certification Exam
    • Programming Concepts
    • Defect Life Cycle in Software Testing
    • What is Visual Studio Code
    • Gray Box Testing
    • What is GPS
    • What is WIX
    • Bootstrap 4 Cheat sheet
    • Increase Productivity With New Technology
    • Uses of Salesforce
    • Uses of Selenium
    • Uses Of C#
    • IntelliJ Cheat Sheet
    • What is Spiral Model
    • Monolithic Kernel
    • Uses Of WordPress
    • What is a Greedy Algorithm
    • What is OSPF
    • Is MySQL Programming Language
    • Is Blockchain the Future
    • What is JMS
    • WordPress Work
    • What is Web Application
    • HTML Image Tags
    • Boolean operators in Java
    • What is WebSocket
    • Introduction To PHP
    • Advantages Of Array
    • Python 3 cheat sheet
    • How JavaScript Works
    • Is Blockchain Safe
    • What is PLC
    • What is Threading
    • How Blockchain Works
    • SoapUI Alternatives
    • What is Microcontroller
    • Advantages of PHP
    • PHP Alternatives
    • Ubuntu Alternatives
    • WordPress Alternatives
    • Linux Alternatives
    • What is SOAP
    • Introduction To Computer Network
    • Windows Operators
    • Android Alternatives
    • What is PowerShell
    • What is Elasticsearch
    • Algorithm in Programming
    • JIRA Alternatives
    • Wix Alternatives
    • PowerShell Operators
    • What is Laravel Framework
    • SOA Alternatives
    • Is Ansible free
    • Laravel Commands
    • What is Blockchain Technology
    • What is Bootstrap
    • What is Unix
    • What is Ansible
    • What is Software Testing
    • Windows Alternatives
    • What is Jira Software
    • What is UI Designer
    • What is VBScript
    • What is SoapUI
    • Uses of Ubuntu
    • What is MVC
    • What is ASP.NET
    • What is Multithreading
    • What is ASP.Net Web Services
    • What is TFS
    • What is DBMS
    • What is Embedded Systems
    • Inheritance in VB.Net
    • What is VMware?
    • What is Open-Source License
    • What is Bot
    • What is Open Source
    • What is ETL Testing
    • What is GraphQL
    • cPanel vs Plesk
    • System Software Tools
    • Information Technology Benefits
    • Black Box Testing
    • What is ETL
    • What is IDE
    • Uses of Coding
    • Uses Of Raspberry Pi
    • What is Hypervisor
    • Website Services
    • What is Common Gateway Interface
    • White Box Testing
    • Web Testing Application
    • OS Alternatives
    • Iterative Model
    • What is Unix Shell
    • Automation Testing Tools
    • Integration Testing
    • System Testing
    • Unit Testing
    • Test Automation Framework
    • Alpha and Beta Testing
    • Decision Table Testing
    • Regression Testing
    • Types of Algorithms
    • What is Appium
    • Prototype Model
    • What is CLI
    • Waterfall Model
    • RAD Model
    • Ray Tracing Algorithm
    • OpenGL in Android
    • Types of UML Diagrams
    • Class Diagram
    • What is Assembly Language
    • ASP.NET Page Life Cycle
    • HTTP Caching
    • What is Selenium Web Driver
    • Selenium Framework
    • Selenium Testing
    • Selenium Automation Testing
    • What is Buffer Overflow
    • What is Joomla
    • What is Virtualization
    • What is WCF
    • What is OOP
    • What is SOA
    • What is JDBC
    • What is Clickbait
    • What is GUI
    • What is FreeBSD
    • Software Testing Principles
    • System Integration Testing
    • What is CMD
    • What is VB.Net
    • What is CodeIgniter
    • UML Use Case Diagram
    • What is WordPress
    • UML Activity Diagram
    • What is Coding
    • UNIX ARCHITECTURE
    • Random Forest Algorithm
    • UML Sequence Diagram
    • DOS vs Windows
    • What is SVG
    • What is QTP
    • VB.NET Operators
    • What is MuleSoft
    • What is Exploratory Testing
    • What is Ransomware
    • Sublime Text Alternatives
    • What is Static Routing
    • Kotlin vs Swift
    • GUI vs CLI
    • What is CentOS
    • What is Template Class in C++
    • What is Apex
    • StringBuffer vs StringBuilder
    • DES vs AES
    • Encryption vs Decryption
    • Dynamic Routing
    • Cyclomatic Complexity
    • Encryption Algorithm
    • Install Kali Linux
    • Alpha Testing vs Beta Testing
    • What is DHCP
    • Basic HTML Tags
    • Advantages of C
    • ASP.Net Validation Controls
    • What is CSRF
    • Network Mapper
    • Loops in C++
    • Loops in C
    • EJB vs Spring
    • Switch Statement in C
    • CentOS Commands
    • Digital Signature Softwares
  • Database Management (71+)
  • Ethical Hacking Tutorial (33+)
  • HTML CSS Tutorial (47+)
  • Installation of Software (54+)
  • Top Interview question (188+)
  • Java Tutorials (196+)
  • JavaScript (71+)
  • Linux tutorial (32+)
  • Network Security (85+)
  • Programming Languages (232+)
  • Python Tutorials (89+)
  • Software Development Careers (38+)
  • SQL Tutorial (33+)
  • String Functions (12+)
  • Technology Commands (38+)
  • Top Differences (368+)
  • Web Development Tools (33+)
  • Mobile App (60+)
Technology Blog Courses
  • Software Testing Training
  • Selenium Training Certification
  • Appium Training
  • JMeter Certification Training
Footer
About Us
  • Who is EDUCBA?
  • Sign Up
  •  
Free Courses
  • Free Course Programming
  • Free course Python
  • Free Course Java
  • Free Course Javascript
  • Free Course on SQL
  • Free Course on Web Design
  • Free HTML Course
  • Free Android App Development Course
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
  • Ruby on Rails Course
  • ASP.NET Course
  • VB.NET Course
  • Bootstrap Training Course
  • Become a Linux System Administrator
  • PHP Course
  • Joomla Training
  • HTML Course
Resources
  • Resources (A To Z)
  • Java Tutorials
  • Python Tutorials
  • Top Differences
  • Top Interview Question
  • Programming Languages
  • Web Development Tools
  • HTML CSS Tutorial
  • Technology Basics
  • Technology Careers
  • Ethical Hacking Tutorial
  • SQL Tutorials
  • Digital Marketing
Apps
  • iPhone & iPad
  • Android
Support
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions

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

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
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
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
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

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 Login

Forgot Password?

Let’s Get Started
Please provide your Email ID
Email ID is incorrect

Limited Period Offer - All in One Software Development Course Bundle View More

Limited Period Offer - Limited Period Offer - All in One Software Development Course Bundle View More