SVG

Giriş
Svg html içinde şöyle başlıyor.

<svg height="200" width="500">
  ...
</svg>

Şöyle de yapılabilir.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
</svg>

path - html
Şöyle yapılıyor. M move, L line anlamına geliyor.

<path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125"/>

JS ile SVG'yi dinamik yaratmak
Şöyle yaparız

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttribute('height','50');
svgimg.setAttribute('width','50');
svgimg.setAttribute('x','50');
svgimg.setAttribute('y','50');
$('svg').append(svgimg);

Eğer bir href atamak istersek şöyle yaparız.

svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'href' ,'http://x.svg');