How Do I Position an SVG Loader With Css? - html

Question

I've found a rather cool SVG loader-thingie on codepen, and it works, but I'm having trouble figuring out how to get it into the center of the screen. Regular 'ole Css is not working, so I'm kind of stuck.
This is the SVG/HTML:
<svg width="300px" height="320px">
<path class="tri1" d="M11.7 118L9.719 118 72.5 9.259 135.281 118z"></path>
<path class="tri2" d="M12.2 118L9.719 118 54.602 40.259 99.486 118z"></path>
<path class="tri3" d="M48.8 118L46.496 118 72.991 72.11 99.486 118z"></path>
</svg>
And this is the Css that matters:
svg {
vertical-align: bottom;
display: inline-block;
}
Please help and thanks in advance!

Answer 1

Assuming all your code is in one file (everything in the HTML) and you are not loading the SVG using img or via background-image, try this:
<style>
#loadingSVG { position: absolute; top:50%; left:50%; }
</style>
<svg width="300px" height="320px" id="loadingSVG">
<path class="tri1" d="M11.7 118L9.719 118 72.5 9.259 135.281 118z"></path>
<path class="tri2" d="M12.2 118L9.719 118 54.602 40.259 99.486 118z"></path>
<path class="tri3" d="M48.8 118L46.496 118 72.991 72.11 99.486 118z"></path>
</svg>
See it here: http://jsfiddle.net/993eL/
Now, assumptions aside, the game changes if you are trying to load it as an external file or if you want to use an external stylesheet. If you want to use external stylesheets, basically you have 2 options to be able to style your SVG.:
Have the SVG inline in the HTML document. It doesn't matter if you
insert it via server-side when generating the page or just copypaste
it in the document, it has to be inline.
Load the SVG as an object element so you don't have to insert it in the HTML, but you'll have to use a separate external stylesheet loaded from inside the SVG file.
Using external stylesheets
Example with method 1: inline SVG in the HTML document
In the HTML document:
<svg ... id="Layer_1">
<ellipse .../>
<path .../>
</svg>
In your stylesheet:
/*Center the SVG element*/
/*Option 1: have the element with an specific width so you can
use margin:0 auto;*/
#Layer_1 {
width: 500px;
margin: 0 auto;
}
/*Option 2: move the element anywhere with absolute positioning.
Note: Remember it will be relative to the parent element as long as
your parent element has position:relative set, else it will take
the body as a base for positioning*/
#Layer_1 {
position: absolute;
top: 50%;
left: 50%;
}
See the complete code: http://jsfiddle.net/Sg2Z5/
Example with method 2: load the SVG as an object
In your SVG file import the external stylesheet as an XML stylesheet (remember SVG is XML based):
<?xml-stylesheet type="text/css" href="stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg">
In your HTML, load the SVG as an XML object:
<object type="image/svg+xml" data="YOUR-SVG-FILE.svg">
<!-- Put your fallback here -->
</object>
References and recommended readings
I recommend to read these articles as they explain all of this with more detail
Using SVG http://css-tricks.com/using-svg/
SVG styling http://blogs.adobe.com/webplatform/2013/01/08/svg-styling/
How to Style Scalable Vector Graphics Using CSS http://www.sitepoint.com/svg-styling-with-css/