What is an SVG?

Navigation
21

Nowadays it is spoken in quality of image and always connected to this type of affirmation occasionally appears this mysterious abbreviation. It seems to be SVG something really amazing, say your image does not get distorted when magnified.

However, not all have yet had a first contact about their use, and use the same image forms 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. Soon to the laics comes the question when thinking about building the SVG:
How do you build a figure with this technology?

And then:

  • What is required for your development?
  • Is there more than one way to implement?
  • Is it free or paid?

I would like a simple example of its construction.

    
asked by anonymous 07.10.2015 / 02:04

1 answer

15

What is svg?

SVG is the abbreviation for Scalable Vector Graphics that can be translated from English as scalable vector graphics. It is an XML language to describe in a vectorial way two-dimensional drawings and graphs, either static or 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 VML and Adobe's PGML. In 2001 SVG won its first official version being svg fully open source.

What is needed for your development?

With a notepad you are already able to develop svg, however 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 that facilitate 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>

References:

Wikipedia svg

Tableless - High resolution images using SVG

    
07.10.2015 / 13:31
How to disable a text field for editing using jQuery / JavaScript? @override mandatory in Java?