Horje
SVG Full Form

SVG is an abbreviation for Scalable Vector Graphics which is an XML-based file format used for the representation of two-dimensional vector graphics. SVG graphics are needed when there is a concern for high-quality graphics on web pages. The scalable graphics can be created using the <svg> element, which can be integrated easily into an HTML file. It has attributes like height and width to define an area where the vector will be created.

Table of Content

We will explore all the above concepts with the help of suitable examples.

Features

  • Support Animation: SVG provides the features to animations using <animate> element.
  • Styling with CSS: SVG supports styling and customization.
  • Scripting and dynamic manipulation: The SVG element can be manipulated dynamically with the help of JavaScript.
  • XML-based Format: SVG written in XML can easily be editable and can be manipulated according to the requirements.

SVG Components

The <svg> element is the container for SVG graphics. All the other SVG elements or components are wrapped inside it. The below table illustrates the elements that form shapes.

Components

Descriptions
Circle The element used to create a circle.
Ellipse The element used to define an ellipse.
Line The element is used to draw a straight line between two points.
SVG Path The element used for creating complex shapes using path data.
Polygon SVG The element used to create a closed polygon shape.
Polyline SVG The element used to draw a series of connected straight-line segments.
Rectangle SVG The element used for creating a rectangle.
Text SVG The element embeds text within the SVG.
Stroking SVG It applies to stroke to an <g> element and groups multiple SVG elements together.

Please refer to the SVG Element Complete Reference article for the detailed descriptions.

Properties

The below table illustrates how each SVG property can be used for the specified SVG elements on a web page along with their description.

Property

Descriptions
width Give the width of the SVG element in pixels.
height Give the height of the SVG element in pixels.
stroke Provide the outline to the shape.
stroke-width Defines the thickness of the stroke.
fill Fill the color inside the shape of the SVG element

Creating Scalable Vector Graphics

Create the <svg> element, and include the width and height as attributes in pixels. There are several elements like circles, ellipses, etc., to make shapes wrap the element inside <svg> element. Give different attributes to the element shapes for styling purposes.

Example 1: The below example illustrates the basic example of Scalable Vector Graphics for creating a circle.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Input type</title>
</head>
  
<body>
    <svg width="200" height="200">
        <circle cx="100" 
                cy="100" 
                r="50" 
                stroke="green" 
                stroke-width="2" 
                fill="yellow" />
    </svg>
</body>
  
</html>

Output:

circlesvg

 

Example 2: The below example illustrates the basic example of Scalable Vector Graphics for creating rectangles.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                initial-scale=1.0">
    <title> SVG Rectangle </title>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>SVG Rectangle</h3>
  
    <svg width="120" 
         height="120">
        <rect x="20"
              y="20" 
              rx="16" 
              ry="16" 
              width="85" 
              height="85"
              stroke="green"
              stroke-width="2" 
              fill="greenyellow">
        </rect>
    </svg>
</body>
  
</html>

Output:

svg10

 

Advantages and Disadvantages

Advantages

  • High Quality: SVG images are vector-based, providing high-resolution images helps when the responsiveness of the website is taken into, measure.
  • Small file size: SVG is based on XML- format, having a small file size as compared to any other file type.
  • Easy to use: SVG files are plain text XML, and code can be created and edited easily on any IDE.
  • SEO Optimizing: The SVG performs better as compared to other file type for graphics the SVG code can easily be accessible to search engines.

Disadvantages

  • Complexity: Creating detailed graphics makes the code complex.
  • Learning Curve: SVG takes more time to learn for designers and developers who are not familiar with vector graphics or XML.
  • Limited filter effects: SVG has limited filter effects, it is not suitable for making photographs as compared to raster graphics formats.

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Input Type HTML Input Type
HTML Audio HTML Audio
HTML Online Compiler HTML Online Compiler
HTML Tutorial HTML Tutorial
SVG Polygon SVG Polygon

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje