The answer is, should you be worrying about who's looking at your code? SVG inline will always bloat your HTML depending how complex the drawn SVG is. Inline does in some respect have better performance implications due to the fact it's being loaded directly with the HTML as opposed to loading the SVG externally when using it, for example, as an <img>. However, it's practically unnoticeable and should be the least priority when coming down to performance.
The disadvantages of inline SVG:
- Bloats code
- Cannot be cached by the browser
- No fallback available
- IE, without XHTML (and that's if SVG is supported) doesn't support SVG technically, though this is a low priority and we shouldn't care about it in the current world of the web. Still, it's primarily a disadvantage to those ancient warriors.
The advantages of inline SVG:
- I can't think of any, seriously. Other nosey people can see it?
- Actually, those without CSS enabled can see it.
The disadvantages of using <img> with SVG:
- Again, limited fallback support (You can use Modernizr to replace the
.svg extension with .png, but then you rely on the user having javascript enabled)
- Limited styling options with the SVG
The advantages of using <img> with SVG:
- Semantically better than bloating all your code
- Readability in your codebase is better for a) yourself and b) other developers who might be working on the project too.
- Better maintainability.
Alternative methods:
You can use the following methods you provided in your question (and below) about using <object>, <embed> and <iframe>, although, these also limit the use cases and would need declaring in every HTML document, which can get messy as you progress in a project, whether it be large or small.
The 'better approach':
Disclaimer: By no means is the a 'better for everyone' method. This is simply how I would declare my SVG elements for reusability and gives me full control of identifying my assets when using SVG.
The biggest pitfall for using inline SVG in your HTML is the fallback support. I have always used SVG as a background image (unless it's a webfont I'm using for icons etc.), purely because I can create a .png version and write the fallback in my CSS, like so:
.icon {
display: inline-block;
vertical-align: baseline;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.icon--16 {
width: 16px;
height: 16px;
}
/* Always declare the PNG before the SVG. */
.icon--foo-blue {
background-image: url('foo-blue.png'); /* Fallback */
background-image: url('foo-blue.svg'), none; /* Modern */
}
.icon--foo-green {
background-image: url('foo-green.png'); /* Fallback */
background-image: url('foo-green.svg'), none; /* Modern */
}
Then, use it:
<span class="icon icon--16 icon--foo-blue"></span>
<span class="icon icon--16 icon--foo-green"></span>
The disadvantage of this:
- No support for CSS styling, however, we should be aware of why we are styling SVG in our CSS. If you're using more colours than your website uses then there is generally something not right. Declaring 4 files for the same SVG but in a different colour is not bad practise as it allows us to cache these in the browser for later, throughout any webpage which in the answer constructed below completely removes this purpose. Take advantage of caching on the server/within the browser!
And of course, it depends what kind of image you are trying to render to the user. If you're going to use large SVG files for showcasing something, for example, I would probably think about what kind of users I'm targeting; that being, those on modern browsers because I might want to include fancy inline SVG animations etc.
It really depends on personal preference too. There is no major red flags for using SVG inline to this day, but we still have some heart for those back in the stone ages of less-than IE9. And, not to forget, Android is quirky with SVG too!
EDIT: It seems like there is a large debate over inline SVG's. One word of warning is, there is no reusability doing this. If you're showcasing a fancy website with fancy SVG animations, then by all means, build your entire page in SVG for crying out loud. No one is stopping you. It's personal preference. But for icons, where you will more than likely reuse throughout a project, please, declare them outside your HTML as it gives you greater control in the long run and not because you need a different colour here and there. Think about it. :)
