How to implement an SVG?

Question

Well, the SVG is very important to the web, since it’s vector and I can resize it at will. It is an image format written in xml and is one of the image standards for web. But, when I try to implement it on a web page, it just doesn’t obey me! It gets crushed at the top left of the page. Can anyone tell me how to manipulate him?

Code example of an SVG image:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" 
        height="297mm" version="1.1" shape-rendering="geometricPrecision" 
        text-rendering="geometricPrecision" image-rendering="optimizeQuality" 
        fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 21000 29700"
        xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Camada_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <circle fill="red" cx="10092" cy="13553" r="1508"/>
 </g>
</svg>

The code above can be seen in a browser, it is a simple circle. The problem is that I cannot place this type of image in the way I want. How do I do that?

Answer 1

Actually the SVG you posted is not a simple circle. It is an object that contains a circle. It is important to distinguish this because if you are trying to position the circle, will not work unless you understand the object in which it is contained.

It is important to understand the attributes you are using to describe the SVG. I will remove those that are irrelevant for this issue and keep only others:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
     width="210mm" height="297mm" 
     viewBox="0 0 21000 29700"> ... </svg>

You are using the attributes height and width in mm, then this unit will be valid for the values you are using within the SVG. The viewBox is your coordinate system. You are associating 210mm with 21000, and 297mm with 29700. I will divide this by 100 to make it easier to work:

<svg xmlns="http://www.w3.org/2000/svg" width="210mm"  height="297mm" version="1.1" viewBox="0 0 210 297">
   <g id="Camada_x0020_1">
      <circle fill="red" cx="100.92" cy="135.53" r="15.08"/>
   </g>
</svg>

What you have here is a screen of 210x297mm with a circle situated more or less in the middle.

I made a Jsfiddle where I traded mm for px for the entire SVG to be visible on the screen. The fiddle contains a block of HTML before, which pushes the SVG to a different position (see that it does not get stuck at the top of the page).

<h1>Texto em HTML</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="210px"  
     height="297px" 
     viewBox="0 0 210 297">
    <g>
        <circle fill="red" cx="100.92" cy="135.53" r="15.08"/>
    </g>
</svg>

You can position this SVG on the page as you like using CSS. I put a border around it to distinguish the 210x297px invisible rectangle (SVG) from the circle (red, which has 15.08px radius):

svg {
    border: solid blue 1px;
}

If you want to use only the circle, you can define a viewBoxthat has exactly the dimensions of it:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     viewBox="0 0 200 200">
    <circle fill="red" cx="100" cy="100" r="100"/>
</svg>

And not use the heightand width, leaving the control to do in CSS or use the default size (which will be set by the parent element):

<div id="circulo">
   <svg> ... </svg>
</div>

So you define the dimensions you want. The viewBox is a coordinate system relative. It will suit the absolute coordinates (in cm, mm, px) that you define through attributes, CSS or context. If you use a CSS containing:

#circulo {
    width: 150px;
    height: 150px;
}

The div will have dimensions 150 x 150px and will reduce the SVG proportionally. The default behavior is not to distort the image, so the smallest dimension will determine the circle size. Try to vary the dimensions and see what happens.

Behold Jsfiddle no. 2

You can now treat SVG like any other DOM component, change its positioning with CSS, access internal components identified with ID via CSS or Javascript, etc.

I used an example of SVG embedded in the page, but everything goes for SVG included via tag <img> (except the possibility to access elements interns SVG via DOM). See Jsfiddle no. 3. Remember that if you use an external SVG this way, you cannot omit the namespace and version attributes (which HTML5 tolerates and assumes default if you do not use).

Answer 2

Look at this example I did on Jsfiddle, the link has the reference of where I produced the image, just click HTML preview, and then in the console take the source code.