Before we get to SVG creation tools it makes sense to address the ways in which SVG files can be used on web pages. Those methods (and their support in browsers) are diverse, compared to the limited utility of bitmap images:

Inline, via the img tag

Probably the easiest method, and the one most familiar to web developers. SVG files can be brought onto a web page using an <img> tag, just as bitmap images are:

Note that size can also be set in the SVG document itself; scaling doesn’t matter per se, as SVG is vector based. CSS is applied to the SVG image like any other element.

The only downside to this technique is the SVG features that you drop when doing so: inline SVG images may include animation, but links inside the file and any scripts and interactivity that are part of the SVG code will be ignored. (The entire SVG image can be linked using an <a> element, of course).

Browser compatibility: SVG-as-img can be used in all modern browsers: IE8 is a significant exception.

In CSS

SVG is very effective when used with CSS: like bitmaps, SVG files can be applied to properties like background-image:

header {
background: url(columns.svg);
}

Browser support is much the same as for inline SVG images; there are also several possible variations. The SVG can also be written directly into the CSS as a DataURI:

To use this technique, line returns and formatting must be removed from the SVG code; Chrome will usually display correctly-formatted SVG code added as a DataURI, but other browsers will not. It's better to encode the SVG as Base64 for complete browser cross-compatibility.

Using SVG in CSS also drops any scripting, interactivity, and links.

Directly, as an SVG tag

SVG code can also be written directly into the page. This preserves of the features of SVG, and is perhaps the best current practice, so long as you’re prepared to drop some backwards browser compatibility. The code usually looks something like this: