SVG scaling [SOLVED]

Post

Posted
Rating:
#1 (In Topic #1012)
JumpyVB
Regular
JumpyVB is in the usergroup ‘Regular’
What is the best way to properly scale an svg graphic for use in Gambas IconView? Here's a hack I made to get the desired sharp result and and easier way which unfortunately yields a blurry result:

Code (gambas)

  1. Public Sub Form_Open()
  2.   Dim FilePath As String = "/usr/share/icons/Papirus/32x32/actions/home.svg"
  3.   Dim TmpDescription As String = File.Name(FilePath)
  4.   ' Method A = Sharp
  5.   Dim FileAsData As String = FixSvgResolution(FilePath, "64", "64")
  6.   Dim Pic_A As Picture = Picture.FromString(FileAsData)
  7.   IconView1.Add(0, TmpDescription, Pic_A)
  8.   ' Method B = Blurry
  9.   Dim Pic_B As Picture = Picture.Load(FilePath)
  10.   IconView1.Add(1, TmpDescription, Pic_B.Image.Stretch(64, 64).Picture)

Code (gambas)

  1. Private Function FixSvgResolution(SvgPath As String, Optional DesiredWidth As String = "32px", Optional DesiredHeight As String = "32px") As String
  2.   Dim FixedSvg As String
  3.   Dim doc As New XmlDocument(SvgPath)
  4.   Dim mainNode As XmlNode = doc.GetElementsByTagName("svg")[0] 'doc.All[0]
  5.   Dim OrigWidth As String = ""
  6.   Dim OrigHeight As String = ""
  7.   Dim Header As String = Split(mainNode.ToString(), ">")[0]
  8.   Dim Attributes As String[] = Split(Header, " ")
  10.   For i = 0 To Attributes.Count - 1
  11.     If Attributes[i] Like "*width=*" Then
  12.       OrigWidth = Split(Attributes[i], String.Chr(34))[1]
  13.     Else If Attributes[i] Like "*height=*" Then
  14.       OrigHeight = Split(Attributes[i], String.Chr(34))[1]
  15.     Endif
  16.     If OrigWidth = "" Or OrigHeight = "" Then
  17.         'Keep looking
  18.       Else
  19.         Exit 'For
  20.     Endif
  21.   Next
  22.   If OrigWidth = "" Or OrigHeight = "" Then Error.Raise("File did not contain width and height!")
  23.   mainNode.NewAttribute("width", DesiredWidth)
  24.   mainNode.NewAttribute("height", DesiredHeight)
  25.   ' mainNode.NewAttribute("viewBox", "0 0 16 16")
  26.   mainNode.NewAttribute("viewBox", "0 0 " & OrigWidth & " " & OrigHeight)
  27.   ' mainNode.NewAttribute("viewBox", "-0.2 -0.2 " & OrigWidth & ".4 " & OrigHeight & "16.4")
  28.   FixedSvg = doc.ToString()
  29.   Return FixedSvg
PS: DotNewAttribute does an update or replace to the existing attribute. But I could not find a proper way to read the xml attributes. So reading the original attribute values is another hack. I appreciate any advice in this regard aswell.
Online now: No Back to the top

Post

Posted
Rating:
#2
cogier
Avatar
Guru
cogier is in the usergroup ‘Guru’
What is the best way to properly scale an svg graphic for use in Gambas IconView?

Well, I have just spent about an hour and a half on this and came up with the following that uses a little less code. Note that line 24 is needed as for some reason a SVG image saved at 128,128 ends up at 160,160!

Code (gambas)

  1. Public Sub Form_Open()
  2.  
  3.   Dim FilePath As String = "/usr/share/icons/Papirus/32x32/actions/home.svg"
  4.   Dim Pic_A As Picture = Picture.Load(FilePath)
  5.   Dim TmpDescription As String = File.Name(FilePath)
  6.  
  7.   ' Method A = Sharp
  8.   IconView1.Add(0, TmpDescription, LoadSVG(FilePath, 256, 256))
  9.  
  10.   ' Method B = Blurry
  11.   IconView1.Add(1, TmpDescription, Pic_A.Image.Stretch(256, 256).Picture)
  12.  
  14.  
  15. Public Sub LoadSVG(sPath As String, iWidth As Integer, iHeight As Integer) As Picture
  16.  
  17.   Dim hSVG As SvgImage = SvgImage.Load(sPath)
  18.   Dim pPic As Picture
  19.  
  20.   hSVG.Resize(iWidth, iHeight)
  21.   If Exist("/tmp/SVG.svg") Then Kill "/tmp/SVG.svg"
  22.   hSVG.Save("/tmp/SVG.svg")
  23.   pPic = Picture["/tmp/SVG.svg"]
  24.   pPic = pPic.Image.Resize(iWidth, iHeight).Picture 'Needed as the SVG file is bigger
  25.  
  26.   Return pPic
  27.  
  29.  

<IMG src="https://www.cogier.com/gambas/SVG1.png"> </IMG>
Online now: No Back to the top

Post

Posted
Rating:
#3
JumpyVB
Regular
JumpyVB is in the usergroup ‘Regular’
 Thank you for your effort cogier. Makes me think I should take a peek at the source code of SvgImage.Resize. I will come back if I find something amazing.

It's a shame that using svgs in gambas is not a trivial task.
Online now: No Back to the top

Post

Posted
Rating:
#4
BruceSteers
Guru
BruceSteers is in the usergroup ‘Guru’
I guess with svg you can use resize and paint to make a Picture object.

Here's a function to create a Picture object from an svgimage using it's Resize and Paint methods


Code (gambas)

  1. '' convert an svg image to a picture
  2.  
  3. Public Sub SvgToPic(sPath As String, W As Integer, H As Integer) As Picture
  4.  
  5.   Dim sv As SvgImage = SvgImage.Load(sPath)  ' load svg
  6.  
  7.   Dim p As Picture = New Picture(W, H, True)  ' make a Picture object (transparent bg)
  8.  
  9.   sv.Resize(W, H)  ' resize svg
  10.  
  11.   Paint.Begin(p)  ' paint svg to the picture
  12.   sv.Paint(0, 0, W, H)
  13.   Paint.End
  14.   Return p
  15.  
  17.  
  18.  

PS. svgimage according to wiki is not great because qt svg methods are buggy.
/comp/gb.qt4/svgimage - Gambas Documentation
Online now: No Back to the top

Post

Posted
Rating:
#5
JumpyVB
Regular
JumpyVB is in the usergroup ‘Regular’
 Thank you Bruce. It's elegant and it works.
Online now: No Back to the top
1 guest and 0 members have just viewed this.