Skip to content
Responsive Variable Size Graphics Editor
JavaScript TypeScript Other
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components
lib
out
pages
public
static
.babelrc
.gitignore
.yarnclean
LICENSE
README.md
next.config.js
package.json
tsconfig.json
webpack.config.js
yarn.lock

README.md

RVG Editor

RVG (Responsive Variable size Graphics) Editor

How to use rvg files

First, you must download rvg-loader.js and worker_pako.js (in public/js folder.)

Next, you should load rvg-loader.js like this.

<script src="rvg-loader.js"></script>

Then you can use r-img tag.

<r-img src="eagle-small.rvg"></r-img>

This tag do not support normal image format.

And you should also set responsive width and height to r-img tag and their parent elements. (display: block is needed.)

body,
html {
  width: 100vw;
  height: 100vh;
}

r-img {
  display: block;
  width: 50%;
  height: 50%;
}

So some code is still needed, but all you need is this. Yes, that's all.

Publication

  • レスポンシブWebデザインのための画像形式及び制作用インターフェース(WISS2019ロングティザー) 発表 PDF

LICENCE

MIT

You can’t perform that action at this time.