From The Blog: Introducing the Nano SVG plugin

nanoSVGexampleSVG or Scalable Vector Graphics is an industry standard way of deploying vector-based artwork. Unlike raster images (made up of pixels), vector images are made up of lines, polygons, and other shapes which can be scaled up or down without loss of quality.

Corona’s core system is based on using raster images and simple vector shapes, but supporting SVG is a feature request from some developers. So, we are happy to make available a plugin which can help: Nano SVG. Based on the C library of the same name, this is a simple SVG parser and rasterizer — that is, it takes SVG data and produces a bitmap texture which you can then use as a display object or texture in your Corona-based app. Note that this plugin, like its source library, may not handle complex SVG files, so you should test each and every file or data table which you pass to nanosvg.newImage() or nanosvg.newTexture().

To get started with the Nano SVG plugin, activate it in the Corona Marketplace and then read the implementation documentation to add it to your project.

View the full article

Thank you very much CoronaLabs!!!

I’ve been waiting a long time for this.

:smiley:

But Oh wait!

I’ve performed some test and I’m still seeing pixelated images (SVG)

What I’m doing wrong?

Thank you in advance.

Best regards,

Erich.

Hey! This plugin using very simple Nano SVG parser & rasterizer. Because it is so simple, it has very limited capabilities, but it is about 80kb on some platforms!

To improve quality, easiest solution is to supersample texture size. It would produce images of much better quality. Try specifying larger pixelWidth, for example:

[lua]

local svg = require “plugin.nanosvg”

svg.newImage {

    pixelWidth = 256,

    width = 200,

    filename = “test.svg”,

    x = display.contentCenterX,

    y = display.contentHeight*0.25,

}

svg.newImage {

    pixelWidth = 1024,

    width = 200,

    filename = “test.svg”,

    x = display.contentCenterX,

    y = display.contentHeight*0.75,

}

[/lua]

https://i.imgur.com/FCqqbxB.png

0DAInHA.png

Wow, thank you very much vlads.

With your advice now I’m getting sharper images!

Best regards,

Erich.

Thank you very much CoronaLabs!!!

I’ve been waiting a long time for this.

:smiley:

But Oh wait!

I’ve performed some test and I’m still seeing pixelated images (SVG)

What I’m doing wrong?

Thank you in advance.

Best regards,

Erich.

Hey! This plugin using very simple Nano SVG parser & rasterizer. Because it is so simple, it has very limited capabilities, but it is about 80kb on some platforms!

To improve quality, easiest solution is to supersample texture size. It would produce images of much better quality. Try specifying larger pixelWidth, for example:

[lua]

local svg = require “plugin.nanosvg”

svg.newImage {

    pixelWidth = 256,

    width = 200,

    filename = “test.svg”,

    x = display.contentCenterX,

    y = display.contentHeight*0.25,

}

svg.newImage {

    pixelWidth = 1024,

    width = 200,

    filename = “test.svg”,

    x = display.contentCenterX,

    y = display.contentHeight*0.75,

}

[/lua]

https://i.imgur.com/FCqqbxB.png

0DAInHA.png

Wow, thank you very much vlads.

With your advice now I’m getting sharper images!

Best regards,

Erich.

Hi Vlads,

nanosvg only supports flat shapes, so how can you implement the gradient near tiger nose? can you share the test.svg to us? thanks!

Hey, [member=‘ouguolin2013’]! I’m just using one from NanoSVG repo: https://github.com/memononen/nanosvg/blob/master/example/23.svg

Hi Vlads,

nanosvg only supports flat shapes, so how can you implement the gradient near tiger nose? can you share the test.svg to us? thanks!

Hey, [member=‘ouguolin2013’]! I’m just using one from NanoSVG repo: https://github.com/memononen/nanosvg/blob/master/example/23.svg