Se hvordan du tegner en SVG fra Javascript

Slik lager du grafikk helt programmatisk.

🎥: Mikael Brevik Vis mer

Du kjenner kanskje SVG (Scalable Vector Graphics) først og fremst som en enkel måte å få vektorbasert grafikk inn på nettsider.

Men da SVG-er bare er et XML-dokument, kan du også skrive dem selv, helt programmatisk.

- Målet nå er å programmere en graf, med rå SVG, via Javascript, forteller Mikael Brevik i dagens Kodesnutt.

Videoen begynner å bli endel måneder gammel, altså, men vi drar den fram igjen her på kode24, for temaet er spennende.

Og denne gangen har Brevik fått med seg utviklerkompis Stian Veum Møllersen, også kjent fra podkastene deres.

- Det finnes selvfølgelig en haug med biblioteker som hjelper deg med dette, sier Møllersen.

- Men det er greit å vite hvordan det fungerer, mener Brevik.

Og det er det så absolutt, for konseptene er ikke voldsomt kompliserte. Hvordan du tegner en SVG fra Javascript ser du i videoen over, og er du bare nysgjerrig på hvordan koden ser ut, finner du den her:

console.log(data());

const svgNS = 'http://www.w3.org/2000/svg';
const createElementSVG = document.createElementNS.bind(document, svgNS);
const svgEl = createElementSVG('svg');
document.body.appendChild(svgEl);

svgEl.style.background = '#333';
svgEl.style.height = `${window.innerHeight}px`;
svgEl.style.width = `${window.innerWidth}px`;
svgEl.style.display = `block`;
document.body.style.margin = 0;
document.body.style.padding = 0;
svgEl.setAttribute('viewBox', '-25 -25 50 50');

function createAxis(x1, y1, x2, y2) {
  const axis = createElementSVG('line');
  axis.setAttribute('x1', x1);
  axis.setAttribute('y1', y1);
  axis.setAttribute('x2', x2);
  axis.setAttribute('y2', y2);
  axis.setAttribute('stroke', 'white');
  return axis;
}

const xAxis = createAxis(-25, 0, 25, 0);
const yAxis = createAxis(0, -25, 0, 25);

svgEl.appendChild(xAxis);
svgEl.appendChild(yAxis);

let elements = data()
  .map(({ x, y }) => ({ x: x * 2.0, y: y * 2.0 }))
  .map(function(d, i, list) {
    let line = null;
    if (i > 0) {
      line = createAxis(list[i - 1].x, list[i - 1].y, d.x, d.y);
    }
    const circle = createElementSVG('circle');
    circle.setAttribute('cx', d.x);
    circle.setAttribute('cy', d.y);
    circle.setAttribute('r', 0.5);
    circle.setAttribute('fill', 'red');

    return { circle, line };
  });

elements.forEach(({ line }) => {
  if (line) svgEl.appendChild(line);
});
elements.forEach(({ circle }) => {
  svgEl.appendChild(circle);
});

function data() {
  return [
    {
      x: -10,
      y: -7
    }
    // (...)
  ];
}