search

samizdatco / skia-canvas

A GPU-accelerated 2D graphics environment for Node.js
MIT License
1.68k stars 64 forks source link

Support SVG file loading #30

Open yisibl opened 3 years ago

yisibl commented 3 years ago

Is it currently not supported to load an SVG file?

How do we convert the text in this SVG into a path?

<svg height="1024px" width="2000px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M32,87.344c0,327.678,265.635,593.313,593.313,593.313 M625.313,680.656C827.829,680.656,992,516.485,992,313.969 M992,313.969c0-125.162-101.464-226.625-226.625-226.625 M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062 M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563 M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5 M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064 M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435" fill="none" id="id1" stroke-width="1"/>
    <text fill="#ff0000" font-family="Noto Sans" font-size="29" font-weight="bold" id="id2" stroke="none">
        <textPath startOffset="100%" text-anchor="end" href="#id1">abc12345640123456723456789010111213141516171819202122232425262728293031323334353637383940123456789010111213141516171819202122232425262728293031323334353637383940xyz</textPath>
    </text>
</svg>
samizdatco commented 3 years ago

Skia doesn't have anything built-in that allows you to load SVG files. I'd been looking into options such as canvg or fabric.js’s SVG parser on the Javascript side or µsvg to do the parsing in Rust.

But either way, it's a pretty big subproject on its own. If anyone felt like kicking the tires on one or more of those possibilities it's be a real help.

samizdatco commented 3 years ago

How do we convert the text in this SVG into a path?

If you just want to convert some text to a path (and don’t need to extract it from a SVG file), you can use the outlineText() method. It works just like fillText() and strokeText() but returns a Path2D object instead of drawing to the canvas.

yisibl commented 3 years ago

In Skia, there is all the SVG rendering logic here: https://github.com/google/skia/tree/main/modules/svg/src

samizdatco commented 3 years ago

Neat, I didn't realize they’d added parsing to the SVG module. At the moment, rust-skia only supports generating SVG output from a canvas (not loading SVG files to be rendered) but I've filed a feature request. We’ll just have to wait and see…

RReverser commented 1 year ago

Looks like rust-skia implemented the necessary bindings in https://github.com/rust-skia/rust-skia/pull/681 couple of months ago. Is there anything else blocking SVG file loading in skia-canvas?

RReverser commented 1 year ago

I suppose one issue is that SVG support is on a separate type, as well as that SVG needs to have target width and height before being rasterized, which makes it quite different from other images in terms of storage.