SergeyMell / nativescript-plugins

Apache License 2.0
14 stars 4 forks source link

Pure SVG instead of SVG file #15

Closed phenric closed 3 years ago

phenric commented 3 years ago

Thank you for the work you do. :)

I've a quick question. Is it possible to use it with pure SVG such as path directly written within the tags or src? Or do I need to firstly create a SVG file in TS?

Concretely, what I would like to do is generating something like <path d="M10 475 Q 300 475 300 250" stroke="black" fill="transparent" /> in TS and bind it in HTML. Is it possible?

I saw you credit the repo nativescript-svg and my question is part of their roadmap. So I wonder if it's done or just planned. ;)

Thx again for your work

phenric commented 3 years ago

Ok guys, I use a workaround. Concretely, I've created a new SVG file with the path described above in resources and I use it using the SVGImage flag. It's definitely less dynamic but it works for what I need to do right now.

SergeyMell commented 3 years ago

You can render svg from raw data like this

import { fromData } from '@sergeymell/nativescript-svg';

private nsSvgData = `
  <svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <g>
        <path ...></path>
    </g>
</svg>
  `;

  svgFile = fromData(this.nsSvgData);

And then render SVGImage using svgFile file as a source. You can find a similar example in the SVG demos for this plugin.