🥇 Incorporando SVG com Javascript

Algum tempo atrás, eu escrevi sobre como incorporar e estilizar documentos SVG no Rails . Esse modesto fragmento de Ruby desde então se tornou um ajudante gem completo do Rails ( inline_svg), que conhece o Asset Pipeline e pode ser estendido com transformações SVG personalizadas.

Uma coisa inline_svgque não podemos fazer é incorporar documentos SVG de URLs remotos. Então eu fiz um pequeno módulo Javascript (ES6!) Para fazer exatamente isso. É chamado RemoteSvg e teve sua primeira versão realmente utilizável (v0.1.0) recentemente.

Aqui está uma demonstração muito rápida da biblioteca em ação.

Nosso HTML:

<!doctype html>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import('lib/main');
</script>

<body>
  <div id='my-svg' data-remote-svg-uri='/my-doc.svg' data-remote-svg-class='little-red'></div>
</body>

lib/main.js:

import './style.css!';
import {RemoteSvg} from 'remote-svg';

new RemoteSvg(document.getElementById('my-svg'))
.then(function() { console.log('SVG loaded...'); })
.catch(function(err) { console.log('Something went wrong: ' + err); });

lib/style.css:

.little-red {
  width: 5em;
  height: 5em;
  fill: red;
}

E o SVG transformado resultante, carregado de forma assíncrona de um URL remoto:

<svg id='my-svg' class='little-red'>
  <!-- svg data ... -->
</svg>

Se você precisar carregar SVGs de URLs remotos, ou apenas quiser incorporar e estilizar SVGs no navegador, verifique RemoteSvg .

Related Posts