B4i Library iSVG (Scalable Vectors Graphics)

upload_2015-11-29_17-25-55.png

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
 

Attachments

  • iSVG.xml
    1.9 KB · Views: 106
  • SVGExample.zip
    13.8 KB · Views: 127

sorex

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
They suggest to set a breakpoint and see where it goes wrong.

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

sorex

Expert
Licensed User
Longtime User
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

Member
Licensed User
Longtime User
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.
 

sorex

Expert
Licensed User
Longtime User
@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
 

sorex

Expert
Licensed User
Longtime User
no, I'm using the remote builder.

last compilation was in januar then it worked fine.
 

sorex

Expert
Licensed User
Longtime User
now it works fine again.

thanks a lot for this fast intervention!
 

Grant Fullen

Member
Licensed User
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
 

Ertan

Active Member
Licensed User
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.
B4X:
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

B4X founder
Staff member
Licensed User
Longtime User
B4X:
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
 
Top