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 , it will not work unless you understand the object it is contained in.
It's important to understand the attributes you're using to describe SVG. I'll remove those that are irrelevant to this question and keep only the 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 , so this unit will be valid for the values you are using within SVG. viewBox is your coordinate system. You're associating 210mm with 21000, and 297mm with 29700. I'm going to split this by 100 to make it easier to work with:
<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 210x297mm screen with a circle more or less in the middle.
I made a JSFiddle where I changed mm to px so SVG displayed 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 SVG (invisible rectangle of 210x297px) from the circle (red, which is 15.08px radius):
svg {
border: solid blue 1px;
}
If you want to use just the circle, you can set a viewBox that 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 do not use height and width , leaving the control to do in CSS or use the default size (which will be defined by the parent element):
<div id="circulo">
<svg> ... </svg>
</div>
So you set the dimensions you want. viewBox is a relative coordinate system . It will fit the absolute coordinates (in cm , mm , px ) that you set 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 smaller dimension will determine the size of the circle. Try varying the dimensions and see what happens.
See JSFiddle no. 2
You can now treat SVG like any other DOM component, change its placement with CSS, access internal components identified with ID via CSS or JavaScript, etc.
I used an SVG example built into the page, but everything works for SVG included via tag <img> (except the possibility of accessing internal elements from SVG via DOM). See JSFiddle no. 3 . Remember that if you use an external SVG in this way, you can not omit the namespace and version attributes (which HTML5 tolerates and defaults if you do not use).
