PureSVG - now with LoadSVG() !

[Seymour Clufley]

This "library" enables you to draw an SVG image using analogues of 2DDrawing's commands.

The following things are possible:

• primitives (lines, curves, texts, raster images, etc.)
• attributes
• classes
• gradients
• patterns
• masking
• mouse actions
• JavaScript
• metadata

Here's a zip containing the code and the help file.

Happy new year, everyone!
Seymour.

[Seymour Clufley]

EDIT: this post was a kind of "help file". We don't need it anymore.

[srod]

Very very interesting Seymour; thanks for this great contribution.

Must admit that I have never used SVG, but your posting makes me want to dive in and get to grips with it all. Some nice possibilities present themselves.

Think I'll grab a cup of coffee and have a good read through your code.



Thanks again.

[Foz]

I like SVGs, I really do, but Windows never seems to like them - does anyone have a suggestion for a good windows SVG viewer?

[Seymour Clufley]

Very very interesting Seymour; thanks for this great contribution.

Thank you, srod. This is my first contribution to T&T. The approval of srod is a good sign!

Must admit that I have never used SVG, but your posting makes me want to dive in and get to grips with it all. Some nice possibilities present themselves.

Well, this was my intention, to make SVG more available to PB programmers. To make it simple instead of daunting.

does anyone have a suggestion for a good windows SVG viewer?

I'm sure there are standalone viewers, but my first thought was Chrome or Opera. I know for a fact they work very well.

[idle]

thanks looks really interesting, just wish I had the time to look at it right now.

[Rings]

very interesting stuff.
What about writing a viewer (no , not a web-browser) or some routines
to write the SVG to a image/sprite ourselves here ?
Cannot be to different (except the scripting stuff)
with only the primitives and gradients.....

[dige]

I've fixed the missing R() Procedure, but the provided example
does not work here (PB4.40x86, Win7 x86).
FormSVGCode(s) retruns ""

Anyone have already successfully tested?

[Seymour Clufley]

Dige,

I thought R() was included in the code. It's just a macro for MessageRequester, so that I only have to type one letter in the code.

Please try this code:

Code: Select all

s = CreateSVG(#PB_Any)
SVG_StartDrawing(s)
SVG_Box(0,0,100,100,#Green)
SVG_StopDrawing()
SaveSVG(s,"C:\test.svg")

If that doesn't work, what is the result of IsSVG(s) ?

If it isn't 1, what's the result of this code:

Code: Select all

z = ArraySize(svgmem(),1)

[einander]

@Seymour:
Nice job! Thanks for sharing.

@Dige
Tested successfully with Pb 4.40 & Win7, replacing the missing R() for MessageRequester.

[Seymour Clufley]

New version! See original post for download link (code is now too long for forum to accept).

Added: SVG_SetElementOpacity()
Added: SVG_SetElementCursor()

Added: SVG_SetMetadataString()
Added: SVG_SetMetadataInteger()
Added: SVG_ClearMetadata()
Removed: SVG_SetDescription() - changed to SVG_SetMetadataString(#SVG_Metadata_Description,desc$)

Added: SVG_ClearPath()
Improved: path storage system
Simplified: path writing commands.

Added: SVG_AbsorbExternalStylesheet()

Added: SVG_CopyElement()
Added: SVG_RemoveElement()
Added: SVG_MoveElement()
Added: SVG_ShiftElement()

[Seymour Clufley]

New version!

It's now called PureSVG.

Many bugs and incomplete commands have been fixed. I apologise for the state of the library in v2; I was very enthusiastic about it and was too eager to put it on the forum.

Anyway, with v3 I have simplified how some of the commands work and added many new commands. See the Version History for details.

Be aware that SVG_Path_LineV2() now takes mid-points using the included PointF structure instead of POINT.

There are now some "helper" commands to take care of tedious shape building: SVG_RegularPolygon, SVG_Arrow, and SVG_CircleSegment which should be useful for pie charts.

Here's a pie chart demo:

Code: Select all

Structure PieChartSlice
  name.s
  value.f
  color.i
EndStructure
Structure PieChart
  slices.i
  slice.PieChartSlice[25]
EndStructure

Procedure.i SVGPieChart(*p.PieChart,title.s,description.s)
  
  s = CreateSVG(#PB_Any,title,description)
  SVG_StartDrawing(s)
  SVG_SetBackground(#SVG_FillMode_Color,#Black)
  
  total.f
  For a = 1 To *p\slices
      total + *p\slice[a]\value
  Next a
  
  d.f = 800
  r.f = d/2
  cx.f = r
  cy.f = r
  
  
  fontname.s = "Courier New"
  fontsize = 12
  
  Dim text_angle.f(*p\slices)
  
  startangle.f = -90
  For a = 1 To *p\slices
      clr = *p\slice[a]\color
      
      deg_arc.f = 360/total**p\slice[a]\value
      SVG_CircleSegment(cx,cy,r,Degrees2Radians(deg_arc),Degrees2Radians(startangle),clr)
      SVG_SetElementStroke(#Black,1)
      
      text_angle(a) = startangle+(deg_arc/2)
      
      startangle + deg_arc
  Next a
  
  
  SVG_Circle(cx,cy,r,-1) ; outline
  SVG_SetElementFill(#SVG_FillMode_None)
  SVG_SetElementStroke(#White,2,50) ;` this strokeopacity doesn't work!
  
  font = LoadFont(#PB_Any,fontname,fontsize)
  img = CreateImage(#PB_Any,1,1) : StartDrawing(ImageOutput(img))
  DrawingFont(FontID(font))
  cc.PointF : cc\x=cx : cc\y=cy
  For a = 1 To *p\slices
      txt.s = *p\slice[a]\name+" ("+Str(100/total**p\slice[a]\value)+"%)"
      tw.f = TextWidth(txt)
      DegreeCoordsFromPoint(@cc,text_angle(a),r/3*2,@tcc.PointF)
      SVG_Text(tcc\x-(tw/2),tcc\y,txt,#Black,"texel")
      SVG_SetElementFont(fontname,fontsize)
  Next a
  StopDrawing() : FreeImage(img) : FreeFont(font)
  
  
  SVG_StopDrawing()
  
  ProcedureReturn s
  
EndProcedure


p.PieChart
p\slices = Random(5)+Random(5)+5
For a = 1 To p\slices
    p\slice[a]\name = RandomLetters(5+Random(15))
    p\slice[a]\value = Random(50)+5
    p\slice[a]\color = RandomRGB(92,200)
Next a

s = SVGPieChart(@p,"Pies","A study")
If IsSVG(s)
    outputfile.s = previewfol+"PureSVG - pie.svg" : SaveSVG(s,outputfile,0) : RunProgram(outputfile)
EndIf
End

There are still some bugs. Here is my list:

• Elements with minus coordinates are sometimes "pushed into" the canvas.
• SVG_CircleSegment looks bad with radius of 180 degrees
• Boundary checking doesn't work on paths that use bezier curves and elliptical arcs.
• Stretching (resizing) a path that contains an elliptical arc will cause distortion of the arc.
• You can't rotate text or image elements - I don't know if this will ever be solved.

[Seymour Clufley]

Sorry, but I've been meaning to reply to this for ages...

What about writing a viewer (no , not a web-browser) or some routines to write the SVG to a image/sprite ourselves here ? Cannot be to different (except the scripting stuff) with only the primitives and gradients.....

I think this would actually be quite difficult. For a start you'd need code to handle bezier curves (cubic and quadratic) and elliptical arcs. And SVG filters would be very hard to emulate, though perhaps they could be ignored.

There is a program, RSVG, for rendering SVGs as raster files.

[peterb]

SVG Gadget - Proof of concept

http://purebasic.peterbay.org/svg.zip

[Seymour Clufley]

New version!

There's a small number of new commands, such as SVGWeb(), SimplifyPath() and SetElementHREF().

Other than that, this version focuses on stability. Some bug fixes:

• Element stroke is taken into account when calculating dimensions
• SVG_CircleSegment can handle 180 degree radius.
• Resizing and rotation can be done to polylines and polygons
• Namespaces were not applied in the best way
• Bound-checking of elliptical arcs now works (thanks to Ollivier!)

There are still bugs:

• SetVisiblePortion() is not reliable and I'd recommend that you don't use it just now
• Resizing a path that contains elliptical arcs will result in distortion

I'll be working on those bugs. If you find any others, please let me know.