B4i Library iSVG (Scalable Vectors Graphics)

This library is based on SVGKit open source project: https://github.com/SVGKit/SVGKit
It allows displaying SVG graphics.

There are two steps:
1. Initialize the SVG object with the SVG file.
2. Export the SVG to a Bitmap based on the target size.

Repeat step #2 whenever the ImageView size changes.

See the attached example project.
If you are using a local Mac builder then you should download this zip file and copy its content to the Mac Libs folder: www.b4x.com/b4i/files/SVGMac.zip

The library xml file is attached.

SVGKit license: https://raw.githubusercontent.com/SVGKit/SVGKit/2.x/LICENSE

 

[sorex]

Thanks Erel!

This comes right on time to test it with my packer.
I'll give it a try tonight (don't have an iPhone here at work)

 

[sorex]

I had to rewrite several routine because

it didn't expose the width/height of the read in svg
it doesn't support bytestream

but that was the "easy" part.

unfortunately it doesn't display my files for some unknown reason altho they display fine in InkScape, IE, other svg tools and on Android.
I sent an example to the SVGKit author maybe it's a bug in their parser.

I'll keep you posted.

 

[sorex]

They suggest to set a breakpoint and see where it goes wrong.

But that's something I can't do, right?

 

[Erel]

You can only put a breakpoint if you use their source code instead of the compiled library. You will need to do it with Xcode.

Does it fail with a specific SVG or with all the images you try?

 

[sorex]

with several SVG files that have been optimized on shorting path d parameters but I know part of the cause.

it's their parser that freaks out on certain occasions like these...

translate("-300-300") fails in SVGKit, works in all other displayers
translate("-300 -300") works

also a problem that it draws outside of the actual working area so it seems that it didn't draw anything untill you change the M(ove) parameters
then it suddenly shows something.

now that I know this I can manually edit the stuff so that it displays right.

 

[LucianDesign]

Is there a chance to update this library to use SVGKit 2.0 (which is a major release) ... this current iSVG library is based on SVGKit 1.2 from 2014.

 

[Erel]

There seems to be an issue with the dependencies of this library. I need to further investigate it. It is not a simple update.

 

[sorex]

@Erel,

had there been an update of this library lately?

when I compile this project I'm now getting this compile error...

ld: framework not found SVGKit for architecture armv7

 

[Erel]

Are you using a local builder? Have you downloaded the Mac files?

 

[sorex]

no, I'm using the remote builder.

last compilation was in januar then it worked fine.

 

[Erel]

Please try again now. Make sure that the library version is 1.00.

 

[sorex]

now it works fine again.

thanks a lot for this fast intervention!

 

[Grant Fullen]

I'm getting the following error message

library not found for -lSVGKit-iOS.1.2.0

That's from trying to compile the example. I placed the xml file in the Libs folder for the local mac builder. It shows up as

• iSVG: 1.20
• libiSVG, size=83312, modified=08/17/2017 18:56:48

In the local mac builder test web page

 

[Erel]

The xml file is only required in the PC side. Have you downloaded SVGMac.zip from the first post and copied the files to the Mac Libs folder?

 

[Grant Fullen]

That's where I was confused. I see the Mac files now. Thanks!

 

[Ertan]

Hello. Can you add a feature like initialize2?
Instead of opening a new topic, I wrote directly to the library. I'm sorry if it's wrong.

svg.Initialize2($"<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="100%" height="100%" viewBox="0 0 128 115" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="#fc7424ff">
    <path fill="${ColorSet}" opacity="1.00" d=" M 37.22 3.35 C 45.06 -0.03 53.78 0.53 62.09 1.04 C 76.14 3.27 88.01 12.36 96.84 23.13 C 107.21 34.19 117.48 45.36 128.00 56.27 L 128.00 57.76 C 116.32 71.13 103.73 83.71 92.28 97.28 C 84.97 105.16 75.47 111.16 64.97 113.67 C 57.45 114.82 49.69 114.84 42.18 113.56 C 30.18 110.46 19.22 103.11 12.17 92.86 C 6.67 86.03 3.76 77.56 2.04 69.06 C 0.99 63.79 -0.11 58.36 0.85 52.98 C 2.18 45.24 3.63 37.35 7.29 30.31 C 13.44 18.03 24.11 7.82 37.22 3.35 Z" />
    </g>
    </svg>
    "$)

Instead of reading the file directly, I want to change the values in it.

 

[Erel]

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    If Root.Width = 0 Then
        Wait For B4XPage_Resize (Width As Int, Height As Int)
    End If
    Dim SVG As SVG = SVGFromString($"<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>
"$)
    ImageView1.SetBitmap(SVG.Export(ImageView1.Width, ImageView1.Height))
End Sub

Private Sub SVGFromString(s As String) As SVG
    Dim svgimage As NativeObject
    svgimage = svgimage.Initialize("SVGKImage").RunMethod("new", Null).RunMethod("initWithData:", Array(svgimage.ArrayToNSData(s.GetBytes("utf8"))))
    Dim svg As SVG = svgimage
    Return svg
End Sub