{RESOLVED} vector nanoSVG plugin issue with outlines

Corona Marketplace Corona Community Plugins
#1

Hi,

I have an issue with the nanoSVG plugin showing weird artefacts around rasterised vectors making it unusable .

You can see the issue perfectly below.

On the black background the outline is jagged and broken.  The overall pixel shape is the same as the bottom image if you look closely. Extra coloured pixels have been added around the outline.

On the white background, it’s perfect.

On the grey background, the strange outline is awful.  Totally unusable.

It’s nothing to do with the common issue of aliasing when one colour is over another.  The outline is simply way too large for that to be an issue.  I’ve also tried vectors from various sites and created my own.  All with the same problem.

And the code:

local nanosvg = require("plugin.nanosvg") local backblack = display.newRect(160,120,320,160) backblack:setFillColor(0) local backwhite = display.newRect(160,240,320,160) local backgrey = display.newRect(160,400,320,160) backgrey:setFillColor(0.7) local text1 = display.newText("Broken Outline",310,20,native.systemFont,20) text1.anchorX=1 local text2 = display.newText("Good",310,180,native.systemFont,20) text2:setFillColor(0) text2.anchorX=1 local text3 = display.newText("Strange Outline?",310,340,native.systemFont,20) text3:setFillColor(0) text3.anchorX=1 local emoji = {} emoji[1] = nanosvg.newImage( { filename = "emoji/1f41a.svg", x = 160, y = 80, width = 128, height = 128, pixelWidth = 128, pixelHeight = 128 }) emoji[2] = nanosvg.newImage( { filename = "emoji/1f41a.svg", x = 160, y = 240, width = 128, height = 128, pixelWidth = 128, pixelHeight = 128 }) emoji[3] = nanosvg.newImage( { filename = "emoji/1f41a.svg", x = 160, y = 400, width = 128, height = 128, pixelWidth = 128, pixelHeight = 128 })
#2

Well I’ve finally found a solution to this issue.  Turns out you need to pre-multiply the alpha to get nanoSVG to show correctly.  Ive attached the filter should anyone need it.  

local kernel = {} kernel.category = "filter" kernel.name = "premultiplyalpha" kernel.fragment = [[P\_COLOR vec4 FragmentKernel( P\_UV vec2 texCoord ) { P\_COLOR vec4 texColor = texture2D( CoronaSampler0, texCoord ); // Pre-Multiply alpha texColor.rgb \*= texColor.a; return CoronaColorScale( texColor ); }]] graphics.defineEffect( kernel ) local backgrey = display.newRect(160,240,320,480) backgrey:setFillColor(0.4) local emoji = {} emoji[1] = nanosvg.newImage( { filename = "emoji/1f918-1f3fb.svg", x = 120, y = 240, width = 64, height = 64, }) emoji[2] = nanosvg.newImage( { filename = "emoji/1f918-1f3fb.svg", x = 200, y = 240, width = 64, height = 64, }) emoji[2].fill.effect = "filter.custom.premultiplyalpha"

And you can see the immediate difference >