Simple Code for Images: A Beginner’s Guide to SVG

This article is specifically for web development, but non-web development people also get new insights. Talking about images talk about “SVG”. now i’ll explain a bit about what i know and understand about “svg”. from the code to the explanation of the code. let’s discuss the book.

Scalable Vector Graphics (SVG) is a web-friendly vector file format. In contrast to pixel-based raster files such as JPEG, vector files store images via mathematical formulas based on points and lines on a grid.

If you have detailed images, stick with PNG. However, SVG is better for responsive and retina-ready web design due to its scalability and lack of loss of quality. In addition, they support animation whereas PNG does not, and raster file types that support animation such as GIF and APNG.

The easiest way to view SVG files is within a web browser. Because SVG uses XML — a text-based markup language similar to HTML — any modern web browser can display SVG files. Just drag your SVG file into a browser like Chrome, Firefox, Safari or Microsoft Edge and the image will appear in a new tab.

Here is an example of a simple circle:

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

Here’s a short description:

• The <svg> element defines the container for the SVG graphic. It has height and width attributes which define the size of the container in pixels.
• The <circle> element draws a circle. It has the following attributes:
  cx and cy : coordinates of the center of the circle, relative to the top left corner of the container.
• r: radius of the circle, in pixels.
• stroke: the color of the circle’s outline.
• stroke-width: width of the circle’s border, in pixels.
• fill: the inner color of the circle.