Recently I had to implement some SVG into JavaScript for a yourtube placeholder for lazy loading and it turned out to be quite easy. The main thing you need to be aware of is the different namespace which svg is using. After that it becomes very easy. You can run the following in the console and see the youtube play button.

const svgNS = 'http://www.w3.org/2000/svg';

const playButton = document.createElementNS(svgNS, 'svg');
playButton.setAttribute('fill', 'red');
playButton.setAttribute('width', '72');
playButton.setAttribute('height', '72');
playButton.setAttribute('viewbox', '0 0 72 72');
playButton.setAttribute('style', 'position: absolute; top: 50%; left: 50%; transform: translate(-36px, -36px)');

const rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('fill', 'white');
rect.setAttribute('x', '10');
rect.setAttribute('y', '15');
rect.setAttribute('width', '52');
rect.setAttribute('height', '42');

const youtube = document.createElementNS(svgNS,'path');
youtube.setAttributeNS(null, 'd', 'M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z');
youtube.setAttribute('transform', 'scale(3)');

playButton.appendChild(rect);
playButton.appendChild(youtube);

document.body.appendChild(playButton);

Using SVG in this way makes it also more easy to create interactive SVG’s, it is easy to add an id to each SVG element and add some behavour.

Recently I wanted to consume the Google places API and use it in a react view. Immediately I got stuck on the CORS (Cross-Origin Resource Sharing) notification, which made it impossible to use the api.

I tried several solutions, booting chrome with specific security flags, extensions and proxying with browsersync. Nothing worked on my Ubuntu machine.

Solution create your own Node serverside endpoint.

I created a express endpoint which passes the server-side result of the api call to http://locahost:3003/api . You can use it by installing express (express-framework) and calling the script below in node.

const express = require('express');
const fetch = require('node-fetch');

const proxyService = express();
const host = 'localhost';
const port = 3003;

proxyService.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

proxyService.get('/api', function(req, res, next) {
    fetch(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=51.985103,5.898730&radius=500&types=point_of_interest&key=YOUR_API_KEY`)
        .then(function(res) {
            return res.json();
        }).then(function(json) {
        res.send(json);
    });
});

const server = proxyService.listen(port, function () {
    console.log('API result available at http://%s:%s', host, port);
});