html – What is an SVG?

Question:

Nowadays, there is talk of image quality and always linked to this type of statement, this mysterious acronym appears from time to time. Seems like SVG is something really awesome, they say its image doesn't get distorted when zoomed in.

However, not everyone has had a first contact about its use, and they use the same image forms as usual: PNG,JPG,GIF.

And sometimes the layman even uses an SVG without knowing that it is an SVG, for example, when part of a code comes with an image and it is in SVG format. Then, the question arises for lay people when thinking about building the SVG:
How do you build a figure with this technology?

And then:

  • What is needed for its development?
  • Is there more than one way of implementation?
  • Is it free or paid?

I would like a simple example of its construction.

Answer:

What is svg?

SVG is the abbreviation for Scalable Vector Graphics which can be translated from English as scalable vector graphics. It is an XML language for describing two-dimensional drawings and graphics in a vector, either static, dynamic or animated.

Is it free or paid?

She is free! This Standard was proposed by the W3C in 1999, inspired by proprietary formats such as Microsoft's VML and Adobe's PGML. In 2001 SVG got its first official version being svg fully open source.

What is needed for its development?

With a notebook you are already able to develop svg, however if you choose this way of implementation you will spend a lot of time and a lot of math. when I need to develop some svg image I use Inkscape, a free tool that allows saving in svg, but there are others like: Adobe Illustrator and Corel Draw. there are also js libraries that make creation easier: RaphaelJS .

Example:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
    Sorry, your browser does not support inline SVG.
</svg>


<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />Sorry, your browser does not support inline SVG.
</svg>

References:

Wikipedia svg

Tableless – High resolution images using SVG

Scroll to Top