Understanding SVG Tag in HTML
Do you know the secret to crisp and scalable web graphics? It lies in the SVG tag in HTML! This powerful tool allows for the creation of vector-based graphics, ensuring that your images look sharp at any size, from tiny icons to large banners. Let's understand more.
In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into SVG tag in HTML.
Best-suited Web Development courses for you
Learn Web Development with these high-rated online courses
What is an SVG Tag in HTML?
The <svg> tag in HTML is used to define Scalable Vector Graphics (SVG) in an HTML document. SVG is an XML-based vector image format that allows for the creation of two-dimensional graphics. These graphics can be static, dynamic, or animated. The SVG format is particularly beneficial for graphics that need to scale without losing quality, such as logos, charts, and other complex drawings.
Syntax of SVG Tag in HTML
<svg width="width_value" height="height_value"> <!-- SVG shapes and elements go here --></svg>
1. width and height attributes specify the size of the SVG container.
2. Inside the <svg> tag, you can use various elements to draw shapes:
- <circle> for circles.
- <rect> for rectangles.
- <line> for straight lines.
- <path> for complex shapes and paths.
- <text> for text.
Each of these elements has its own set of attributes to define its appearance.
Usage of HTML SVG Tag with Examples
Let's see some examples showing the usage of the SVG tag in HTML.
<!DOCTYPE html><html><head> <title>SVG Circle Example</title></head><body>
<!-- SVG element to draw a circle --><svg width="100" height="100"> <!-- Circle with center (cx,cy), radius (r), and blue fill color --> <circle cx="50" cy="50" r="40" fill="blue" /></svg>
</body></html>
Output
Example 2: Drawing a Rectangle
Problem Statement: Create an HTML page that shows a red rectangle.
<!DOCTYPE html><html><head> <title>SVG Rectangle Example</title></head><body>
<!-- SVG element to draw a rectangle --><svg width="200" height="100"> <!-- Rectangle with position (x,y), width, height, and red fill color --> <rect x="50" y="20" width="100" height="60" fill="red" /></svg>
</body></html>
Output
Example 3: Creating a Line
Problem Statement: Display a diagonal line across the SVG canvas.
<!DOCTYPE html><html><head> <title>SVG Line Example</title></head><body>
<!-- SVG element to draw a line --><svg width="200" height="100"> <!-- Line from (x1,y1) to (x2,y2) with black stroke color --> <line x1="0" y1="0" x2="200" y2="100" stroke="black" /></svg>
</body></html>
Output
Example 4: Adding Text
Problem Statement: Add a text label inside an SVG element.
<!DOCTYPE html><html><head> <title>SVG Text Example</title></head><body>
<!-- SVG element to add text --><svg width="200" height="100"> <!-- Text positioned at (x,y) with specified font size --> <text x="10" y="50" font-size="20">Hello SVG</text></svg>
</body></html>
Output
Example 5: Combining Shapes
Problem Statement: Combine multiple SVG shapes to create a simple face.
<!DOCTYPE html><html><head> <title>SVG Face Example</title></head><body>
<!-- SVG element to draw a face --><svg width="200" height="200"> <!-- Face outline as a circle --> <circle cx="100" cy="100" r="80" fill="yellow" /> <!-- Two eyes as smaller circles --> <circle cx="70" cy="85" r="10" fill="black" /> <circle cx="130" cy="85" r="10" fill="black" /> <!-- A smile as a path --> <path d="M 70 130 Q 100 150 130 130" stroke="black" fill="transparent" /></svg>
</body></html>
Output
Key Takeaways
-
The SVG (Scalable Vector Graphics) tag in HTML is used for embedding vector-based graphics in web pages. Unlike raster images (like PNG or JPEG), SVG graphics don't lose quality when scaled, making them ideal for responsive design.
-
SVG code can be written directly within HTML, allowing for easy integration and manipulation. This direct embedding enables web developers to style and interact with SVG elements using CSS and JavaScript, just like other HTML elements.
-
It supports a wide range of visual features, including shapes, paths, text, and complex fill patterns. It's also capable of interactivity and animation, making it a powerful tool for creating dynamic and engaging web graphics.
-
SVGs are text-based and can be made accessible to screen readers, unlike raster/bitmap images. They can also be indexed by search engines, which can be beneficial for SEO.
FAQs
What is the svg tag used for in HTML?
The svg tag is used to embed SVG (Scalable Vector Graphics) content in HTML documents. It allows for the creation and display of vector graphic elements such as shapes, paths, and text directly within HTML, making it useful for high-quality graphics that need to scale cleanly on all types of devices.
How is SVG different from other image formats like JPEG or PNG?
Unlike JPEG or PNG, which are raster graphics and can lose quality when scaled, SVG is a vector format. This means SVG graphics are composed of points, lines, and shapes, not pixels, so they can be resized without losing clarity. SVG is ideal for logos, icons, and other designs that require scalability and crisp display on various screen sizes.
Can SVG be styled with CSS?
Yes, SVG elements can be styled with CSS. Styles can be applied externally or inline within the SVG itself. This includes changing colors, fill, stroke, and applying transformations like rotation or scaling. CSS animations and transitions can also be used to animate SVG elements.
Is SVG supported by all modern browsers?
Yes, all modern web browsers support SVG. This includes browsers like Chrome, Firefox, Safari, and Edge. SVG provides a consistent and accessible way to display vector graphics across different platforms and devices.
How do you embed an SVG graphic in an HTML document?
An SVG graphic can be embedded directly into HTML using the svg tag. The SVG code can be written inside the svg tag. Alternatively, an SVG file can be referenced externally using an img tag, similar to other image formats, or by using CSS background images. However, embedding SVG directly in HTML offers greater flexibility for styling and interaction.
Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio
Top Picks & New Arrivals
