B4A Library [B4X] [XUI] nanoSvg Library (cross-platform)

nanoSvg Library
Support: B4A and B4J.

wrapper C/C++ nanoSvg (Gihub)

For B4J, copy the dll(x64) to B4J/Objects of the project.

NanoSVG is a simple stupid single-header-file SVG parse. The output of the parser is a list of cubic bezier shapes.
The library suits well for anything from rendering scalable icons in your editor application to prototyping a game.
NanoSVG supports a wide range of SVG features, but something may be missing, feel free to create a pull request!
The shapes in the SVG images are transformed by the viewBox and converted to specified units. That is, you should get the same looking data as your designed in your favorite app.

Dim svg As nanoSvg
svg.Initialize(B4XImageView1.mBase.Width, B4XImageView1.mBase.Height)
  
svg.Scale = 0.5
Dim imgRGBA() As Byte = svg.Render(File.ReadString(File.DirAssets, "23.svg"))
  
If imgRGBA.Length > 0 Then
    B4XImageView1.mBackgroundColor = 0
    B4XImageView1.Bitmap = nanoSvgAlphaBitmap(imgRGBA)
End If
  
' ***
  
svg.Width = B4XImageView2.mBase.Width
svg.Height = B4XImageView2.mBase.Height

svg.Scale = 0.8
svg.Align = 6
Dim imgRGBA() As Byte = svg.Render(File.ReadString(File.DirAssets, "telegram-plane.svg"))
  
If imgRGBA.Length > 0 Then
    B4XImageView2.mBackgroundColor = xui.Color_ARGB(255,255,255,255)
    B4XImageView2.Bitmap = nanoSvgAlphaBitmap(imgRGBA)
End If

Public Sub nanoSvgAlphaBitmap(img() As Byte) As B4XBitmap
    Dim w As Int = Bit.Or(Bit.And(img(img.Length-4) ,0xFF), Bit.ShiftLeft(Bit.And(img(img.Length-3) ,0xFF), 8))
    Dim h As Int = Bit.Or(Bit.And(img(img.Length-2) ,0xFF), Bit.ShiftLeft(Bit.And(img(img.Length-1) ,0xFF), 8))

    Dim bc As BitmapCreator
    bc.Initialize(w, h)
  
    Dim lick As Int
    For y = 0 To h - 1
        For x = 0 To w - 1
            bc.SetColor(x, y, xui.Color_ARGB( _
                Bit.And(0xff, img(lick + 3)), Bit.And(0xff, img(lick)), _
                Bit.And(0xff, img(lick + 1)), Bit.And(0xff, img(lick + 2))))
            lick = lick + 4
        Next
    Next
    Return bc.Bitmap
End Sub

 

[Mike1970]

Hi!
I was trying out your library but i got strange results.

Expected Svg:

Result:

Text disappear, colors disappear.
I attach the original svg in a zip file (is not possible to upload the .svg alone)

Thanks in advance for the support

 

[mazezone]

Hi!
I was trying out your library but i got strange results.

Expected Svg:

View attachment 164285

Result:

View attachment 164286

Text disappear, colors disappear.
I attach the original svg in a zip file (is not possible to upload the .svg alone)

Thanks in advance for the support

I recommend reading about the capabilities of nanoSvg in the official repository and what it cannot do. One thing that definitely won’t work is font support. I only wrote a wrapper around the official library, and it’s convenient because it has a very small size. If you need full-fledged support, you should look for something more powerful like librsvg or similar. However, that would involve at least a few megabytes of binaries.
As an option, you can preprocess the SVG. For fonts, you need to convert them to "curves."

 

[Mike1970]

Ok thanks you for the clarification!
I think will avoid the problem using this technique