• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML SVG

← Previous Next →

SVG (Scalable Vector Graphics) is an XML-based format used to define vector-based graphics for the web. Unlike raster images (e.g., PNG, JPEG), SVG graphics do not lose quality when scaled or zoomed.

SVG is used to create lines, shapes, text, and images that are scalable, stylable, and scriptable using CSS and JavaScript.

🔹 Why Use SVG?

  • Scales without losing quality (perfect for logos and icons)

  • Easily styled with CSS

  • Can be animated with JavaScript or CSS

  • Smaller file size for simple graphics

🔹 Basic SVG Syntax

<svg width="200" height="100">
  <rect width="200" height="100" style="fill:lightblue;" />
</svg>

🔹 Common SVG Elements

Element Description
<svg> Container for SVG content
<rect> Draws a rectangle
<circle> Draws a circle
<ellipse> Draws an ellipse
<line> Draws a line
<polyline> Series of connected straight lines
<polygon> Closed shape with multiple sides
<path> Defines complex shapes and curves
<text> Adds text to SVG

💻 Examples

✅ Rectangle
<svg width="300" height="100">
  <rect width="300" height="100" style="fill:tomato;" />
</svg>
✅ Circle
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>
✅ Line
<svg height="100" width="200">
  <line x1="0" y1="0" x2="200" y2="100" stroke="black" stroke-width="2" />
</svg>
✅ Text
<svg width="300" height="100">
  <text x="20" y="50" font-family="Arial" font-size="24" fill="blue">
    Hello SVG
  </text>
</svg>
✅ Path (Custom Shapes)
<svg width="200" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
        stroke="black" fill="transparent"/>
</svg>

Practice Questions

Q1. Draw a red rectangle of 200x100 size using SVG.

Q2. Create a green circle with a radius of 40 pixels.

Q3. Add a line from top-left to bottom-right of a 200x100 area.

Q4. Display the text "Welcome to SVG" using the <text> element.

Q5. Create a blue ellipse with rx=50 and ry=25.

Q6. Use <polygon> to create a triangle.

Q7. Style an SVG shape using CSS instead of style attribute.

Q8. Animate a circle’s radius using CSS or JavaScript.

Q9. Use <path> to draw a complex wave shape.

Q10. Create a group of SVG shapes using <g> tag and apply a transformation.

HTML SVG Quiz

Q1: What does SVG stand for?

A. Simple Vector Graphics
B. Scalable Visual Graphics
C. Scalable Vector Graphics
D. Scripted Vector Graphs

Q2: Which element is used to draw a circle in SVG?

A. <ellipse>
B. <oval>
C. <round>
D. <circle>

Q3: Which SVG element is used for complex shapes?

A. <polyline>
B. <shape>
C. <path>
D. <polygon>

Q4: What does the cx and cy attributes in <circle> represent?

A. Color
B. Center x and y coordinates
C. Circle width and height
D. Curve values

Q5: What happens when you scale an SVG image?

A. It gets pixelated
B. It loses quality
C. It remains sharp
D. It stops working

Q6: Which tag is the container for all SVG graphics?

A. <canvas>
B. <draw>
C. <svg>
D. <shape>

Q7: How do you fill a shape with color in SVG?

A. style="background"
B. style="color"
C. style="fill"
D. style="stroke"

Q8: Which element is used to add text inside SVG?

A. <label>
B. <text>
C. <string>
D. <font>

Q9: Which SVG element creates connected line segments?

A. <line>
B. <polyline>
C. <polygon>
D. <curve>

Q10: How can SVG be styled?

A. Only with inline styles
B. With JavaScript only
C. With CSS and inline styles
D. It can't be styled
← Previous Next →
Login
Go Back Top