What is an SVG?

Asked

Viewed 975 times

23

Nowadays, we talk about image quality and always linked to this type of statement every now and again, this mysterious acronym appears. It seems to be SVG something really amazing, they say that your image does not get distorted when magnified.

However, not all have had a first contact about its use, and use the same image shapes as always: 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 to the laity comes the question when thinking about building such SVG:
How to build a figure with this technology?

And then:

  • What is necessary for its development?
  • There is more than one form of implementation?
  • She’s free or paid?

I would like a simple example of its construction.

html image svg image-processing
  • 2

    Examples: http://codepen.io/search/pens?q=svg&type=type-pens

  • @Marcelobonifazio Thanks man!! These examples seem very interesting!!!

  • 2

    The SVG has been growing after the fall of the SWF (flash). It is natural not to be known. Another point is that you need more suitable support from browsers. An SVG can be written in Plain/text code. For more complex images it is unviable. In these cases we use image editing software that supports SVG. Interesting that SVG interacts with CSS and JS. The subject is very broad. I don’t have time to post as an answer.

  • @Danielomine Thanks,For your comment could be an answer. There is no need for a broad answer ,feel free to answer the question, when you have some time!

1 answer

17


What is svg ?

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

She’s free or paid?

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

What is necessary for its development?

With a notepad you are already able to develop svg, but if you choose this form of implementation will spend a lot of time and a lot of math. when I need to develop some svg image I use Inkscape, Free tool that allows saving in svg, but there are others like: Adobe Illustrator and Corel Draw. there are also libraries js that facilitate the creation: 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>

Bibliographical references:

Wikipedia svg

Tableless - High resolution images using SVG

Browser other questions tagged html image svg image-processing

You are not signed in. Login or sign up in order to post.