SVG (Scalable Vector Graphics) Interview Questions

This section covers frequently asked SVG interview questions.

1. Full Form of SVG.

Scalable Vector Graphics.

2. What is SVG?

SVG is an XML-based vector image format. Vector images don't lose quality when scaled, making them ideal for web graphics.

3. Drawing a Rectangle in SVG.

Use the <rect> tag.

Example

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

4. Drawing a Line in SVG.

Use the <line> tag.

Example

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

5. Drawing a Circle in SVG.

Use the <circle> tag.

Example

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

6. Drawing Paths in SVG.

Use the <path> tag with path data (commands like M, L, C, etc.).

Example

<path d="M150 0 L75 200 L225 200 Z" />

7. Drawing Polygons (Open Shape).

Use the <polygon> tag.

Example

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

8. Drawing Polygons (Closed Shape).

Use the <polygon> tag; the shape automatically closes.

9. Adding Text in SVG.

Use the <text> tag.

Example

<text x="0" y="15" fill="red">Sample Text</text>

10-15. Path Element Commands.

(This section lists and describes SVG path commands—L (line), Z (close path), M (move), H (horizontal line), V (vertical line), S (smooth curve).)

16. stroke Property (Color).

The stroke property sets the color of an element's outline.

Example

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

17. stroke-width Property.

Sets the thickness of an element's outline.

18. stroke-linecap Property.

Defines the shape of line ends (e.g., butt, round, square).

19. stroke-dasharray Property.

Creates dashed lines by specifying dash and gap lengths.

20. Grouping SVG Shapes.

Use the <g> (group) element.

21. Adding SVG to HTML.

You can embed SVG into HTML using the <img> tag, an <object> tag, or by directly embedding the SVG code within <svg> tags.

22. Filters in SVG.

The <filter> element applies visual effects to SVG graphics.

23. Commonly Used SVG Filters.

(This section would list common SVG filters like blur, drop-shadow, etc.)

24. The feGaussianBlur Filter.

Creates a blur effect.

25. Patterns in SVG.

The <pattern> element defines reusable patterns for filling shapes.

26. Gradients in SVG.

Gradients create smooth color transitions.

27. Linear Gradients.

Use the <linearGradient> element for linear color transitions.

28. Radial Gradients.

Use the <radialGradient> element for circular color transitions.

29. Browser Support for SVG.

(List major browsers that support SVG.)

30. Animating SVG Graphics.

Use the <animate> element or other animation elements (like <animateTransform>).

31. Responsive SVG Images.

Yes, SVG supports event handling, allowing for interactive and responsive graphics.

32. JavaScript in SVG.

Yes, you can embed JavaScript code within SVG.

33. Creating Links in SVG.

Use the <a> element with the xlink:href attribute.

34. Clipping Shapes.

Use the <clipPath> element.

35. SVG Masking.

Masking controls the visibility of parts of an SVG shape using a mask element.

36. Commonly Used SVG Tools.

  • Inkscape
  • Adobe Illustrator
  • Other SVG editors

37. Rotation Transformation.

Use the <rotate> transformation element.

38-41. Drawing Shapes in SVG (Circle, Rectangle, Ellipse, Path).

(This section would provide code examples for drawing various shapes using the relevant SVG elements and attributes.)