Open SVG File

Structure of an SVG file

SVG stands for Scalable Vector Graphics, a W3C (World Wide Web Consortium) standard, based on XML (eXtensible Markup Language).

We use SVG to create two-dimensional vector images.

SVG is an open standard and has been developed by the W3C since 1999.

Today most browsers are capable of rendering SVG graphics exactly as they render an image, with the exception that they are usually created by code in real time.

In SVG, the elements belong to the DOM (Document Object Model).

That is, if we want to draw a circle, the circle is actually a <circle> tag, and a <script> can refer to the circle and manipulate it, in much the same way as it can manipulate a <div>.

SVG code

An SVG image begins with an <svg> tag.

It is the container (canvas) where we are going to put the graphics that we draw.

The width and height of the <svg> element can be defined with the width and height attributes respectively.

We can also use CSS for this purpose.

viewBox Attribute

The viewBox attribute is used to define a coordinate system.

For example, setting the values ​​for viewBox="0 0 250 100" means that the viewport used to draw the circle starts at the point {x:0,y:0}, has a width of 250 user units, and a height of 100 user units.

Then the <circle> element is used to draw a circle.

The attributes cx and cy represent the x and y coordinates of the center of the circle.

If cx and cy are omitted, the center of the circle is at the point x=0, y=0 ( top left corner of SVG canvas ).

The r attribute defines the radius of the circle (in this case 45px).

The stroke attribute defines the color of the stroke (of the border).

The stroke-width attribute defines the width of the stroke (in this case 2px).

The fill attribute defines the fill color. ( in this case #afafa0 ).

At the end we close the SVG container: </svg> .

Below we see the complete code, and the execution of said code:

<svg viewBox="0 0 250 100" style="width:250px; height:100px;">
  <circle cx="125" cy="50" r="45" stroke="#003300" stroke-width="2" fill="#afafa0"></circle>
</svg>

Get more information about how to open SVG file.

Also check how to:

• open PAGES file
• open BIN file
• open RPMGS file
• open ICS file
• open MKV File

If you are not able to open file with certain file extension make sure to check if extension for the file is correct. It is possible that information in the file doesn't match file extension.