This is a tutorial on how to create a linear gradient in SVG using JavaScript.

(A copy of the finished project, Linear gradients with SVG in JavaScript, can be found on CodePen.)

Create the SVG elements

First, define the various SVG elements will be used. These are <svg> <defs> <linearGradient>, and <rect>.

// Store the SVG namespace for easy reuse.
var svgns = 'http://www.w3.org/2000/svg';

// Create <svg>, <defs>, <linearGradient> and <rect> elements using createElementNS to apply the SVG namespace.
// (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS)
var svg = document.createElementNS(svgns, 'svg');
var defs = document.createElementNS(svgns, 'defs');
var gradient = document.createElementNS(svgns, 'linearGradient');
var rect = document.createElementNS(svgns, 'rect');

<svg> is the SVG DOM element. All SVG elements need this to exist. <defs> is where the linear gradient is defined.

<linearGradient> (the uppercase G is important) is the linear gradient definition. It contains <stop> elements to determine where and when different colours appear.

Finally, <rect> is a rectangle in SVG. This is the shape that the linear gradient is applied to.

I am using document.createElementNS rather than document.createElement because the NS in the former function stands for "namespace"–SVG elements have an entirely different namespace to traditional XHTML / HTML, so their namespace must be passed.

createElementNS accepts two arguments; the namespace to use and the name of the element. This is where the svgns variable comes into play. It contains the URI for the SVG namespace, which I pass as the first argument to createElementNS function.

Append the stop information

This is probably the most complicated step. It's not necessary, but it does make life easier.

// Store an array of stop information for the <linearGradient>
var stops = [
{
  "color": "#2121E5",
    "offset": "0%"
},{
  "color": "#206DFF",
    "offset": "100%"
}
];

// Parses an array of stop information and appends <stop> elements to the <linearGradient>
for (var i = 0, length = stops.length; i < length; i++) {

  // Create a <stop> element and set its offset based on the position of the for loop.
  var stop = document.createElementNS(svgns, 'stop');
  stop.setAttribute('offset', stops[i].offset);
  stop.setAttribute('stop-color', stops[i].color);

  // Add the stop to the <lineargradient> element.
  gradient.appendChild(stop);

}

Here, an array containing colour stop information is created. A for loop takes this array and runs through each item, creating a <stop> element using createElementNS, with the setAttribute method to add attributes to the element–in this case, offset and stop-color.

offset is where that colour is located, stop-color is the colour at that is used at the location of the colour stop.

The for loop finishes by appending the <stop> element to the <linearGradient> element.

Add the linear gradient

The next few lines set an id on the gradient so that it can be referenced by other SVG elements. They then set the x1, x2, y1 and y2 attributes. These dictate the x and y coordinates for the start and end of the linear gradient. The block of code ends by appending the <linearGradient> to the <defs> element.

// Apply the <lineargradient> to <defs>
gradient.id = 'Gradient';
gradient.setAttribute('x1', '0');
gradient.setAttribute('x2', '0');
gradient.setAttribute('y1', '0');
gradient.setAttribute('y2', '1');
defs.appendChild(gradient);

Mozilla Developer Network has all the available attributes for linear gradients.

Create a rectangle to display the gradient

Nothing new here–except the fill attribute is set to url(#Gradient), where Gradient is the id of the linear gradient that was created created.

// Set up the <rect> element.
rect.setAttribute('fill', 'url(#Gradient)');
rect.setAttribute('width', '100%');
rect.setAttribute('height', '100%');

The width and height are set to 100% to make the gradient expand to the width and height of the SVG element.

Set up the SVG element's attributes

The width and height are set to 100% (for a full page SVG) and the version and namespace are also defined.

// Assign an id, classname, width and height
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%')
svg.setAttribute('version', '1.1');
svg.setAttribute('xmlns', svgns);

The docs on Mozilla Developer Network go over the basics of SVG namespaces.

Add the completed SVG to the document

To finish it off, the <defs> and <rect> elements are added to the SVG element, which is added to the <body> element.

// Add the <defs> and <rect> elements to <svg>
svg.appendChild(defs);
svg.appendChild(rect);

// Add the <svg> element to <body>
document.body.appendChild(svg);