English | 简体中文

svg-webgl-loader

Introduction

svg-webgl-loader， a tool for rendering svg on canvas(webgl).

Installation

npm/yarn

npm i svg-webgl-loader

yarn add svg-webgl-loader

CDN

<script src="https://unpkg.com/svg-webgl-loader/dist/js/index.umd.js"></script>

If you need a specific version, such as version 1.0.1, you can add the version number:

<script src="https://unpkg.com/[email protected]/dist/js/index.umd.js"></script>

Usage

import svgLoader from "svg-webgl-loader";
import svgUrl from "./img/test.svg";
// load and parse svg data
const svgData = await svgLoader(svgUrl);
// paint
svgData.draw({
	canvas,
	loc: {
		x: 0,
		y: 0,
		width: 300,
		height: 300
	},
})

demo

If necessary, you can modify the background color through：

let gl = canvas.getContext('webgl');
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

API

draw

usage：

const svgData = await svgLoader(svgUrl);
svgData.draw(drawParams)

interface drawParams {
	canvas: HTMLCanvasElement, // the canvas to be rendered on
	loc?: { // location for painting
		x: 0,
		y: 0,
		width?: 300, // width for painting，default is the width of svg
		height?: 300 // height for painting, default is the height of svg
	},
	config?: {
		needTrim?:true, // whether need to erase, default value is false
		needFill?: true, // whether need to fill svg, default value is true
		needStroke?: true // whether need to stroke svg, default value is true
	}
}

Remark

svg-webgl-loader mainly refers to the scheme of rendering svg in three.js: parse the paths, discrete paths to points and triangulate, then the svg would be analyzed to many triangles, so that it can be rendered by the webgl shader.