SVG: The Ultimate Guide

2 min read

SVG stands for Scalable Vector Graphics, which are vector images that can be scaled up or down without losing quality. Unlike raster images, SVGs don’t rely on pixel data to maintain their appearance. Instead, they use mathematical equations to create shapes and lines. This means you can scale an SVG image up or down as much as you want without losing any detail.

Code Example:

<svg height="210" width="500">
<circle cx="100" cy="70" r="40" stroke="black" stroke-width="3" fill="red" />

SVG Attributes:

  • xmlns: Specifies the namespace for the SVG element.
  • version: Specifies the version of the SVG specification.
  • baseProfile: Specifies the minimum set of features that a user agent must support to render the SVG content correctly.
  • width and height: Specify the size of the SVG canvas.
  • viewBox: Defines the aspect ratio of the SVG graphic.
  • preserveAspectRatio: Determines how the SVG viewport is fitted into the specified viewing area.
  • xy: Define the x and y coordinates of the element.
  • cxcy: Define the x and y coordinates of the center of an elliptical object (circle, ellipse).
  • r: Defines the radius of a circular or elliptical object.
  • stroke: Specifies the color of the outline of the shape.
  • stroke-width: Specifies the width of the outline of the shape.
  • fill: Specifies the color used to fill the inside of the shape.


SVG is a powerful tool for creating scalable vector graphics for web design and development projects. It offers many advantages over traditional raster images, such as scaling up or down without losing quality. In this article, we have covered the basics of SVG, including code examples and an explanation of its attributes. We hope this guide has been helpful for you in understanding the power of SVGs!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Carlos Baez

Subscribe now to keep reading and get access to the full archive.

Continue Reading