learn | unlearn | relearn

First you should read Xojo's article how to optimize Web Applications:

UserGuide:Web App Optimization - Xojo Documentation

Loading pictures separately and storing them  in properties is essential for the webtoolbar. Why? Well, usually you will show the webtoolbar on all (at least many) web pages, and it will (almost) always be the same for all users (means for all sessions of a runnin Xojo Web 2 Application).

Consequently "caching" these files is the way to go. Caching means in this case that you are basically loading the pictures only once per running app, and then they stay in a property (so in your server's memory).

How to do this with SVG files?

Why to use SVG-Files at all? They scale better and easier and you will get a crispier result. Look at the following articles to get a better understanding of what I mean:

Xojo WebToolBar Brand Icon
It was only a question of time until I would run into the following issue:The standard brand icon in Xojo Web 2 is a square (like any other icon on thewebtoolbar), but most company logos don’t fit into a square shape, like thefollowing, for instance. If you are trying to bring the above logo int…
MBS ChartDirector Plugin For Xojo Web2 and Retina/HiDPI results
Those following me on Xojo’s forum probably know that I am big fan of the MBS plugins from Monkeybread Software. One of my favorite is the…

SVG is often the best and easiest way to get some really cool and crisp outcomes.

1.  Using a property

The "easiest" way would be to use a property defined as string. Open your SVG file (which is an XML-file) and copy  & paste the content into your the default value of your string variable. That's the quick and dirty way.

But there are few caveats with this:

  • You will need to put this string back to a file, in case you ever want to change your picture again.
  • Or you need to hold a copy of the original file.
  • Having fun with "Search & Replace" in the Xojo IDE. You either will get too many results or (more dangerous!) you might replace bits in this string by mistake (believe me, it is just too easy to make this happen).
  • If you have many of SVG pictures this will bloat your code and slow down your searches (unless you exclude the location where you are storing these SVG data).
  • It looks ugly.
  • It's ugly.
  • ...

2.  Loading your SVG files

As we learned above that it makes anyway sense to keep at least one physical copy of your picture file, let's read our SVG-file with Xojo. Let's assume we have a file called "pvmag_logo.svg", stored in the subfolder "img" in the resources-folder of our final app, the following code will read the content of this SVG-file into the web picture:

// Only read it once per running App
If mPVMAGLogo Is Nil Then
  Var logoSVGFile As FolderItem = SpecialFolder.Resources.Child("img").Child("pvmag_logo.svg")
  Var svgData as string
  // Ensure to copy your svg-file into the right path, let's check if this worked
  If logoSVGFile <> Nil And logoSVGFile.Exists Then
    Var t As TextInputStream
      // As SVG consists of XML-based instructions, we can read it like text
      t = TextInputStream.Open( logoSVGFile )
      t.Encoding = Encodings.UTF8
      svgData = t.ReadAll
    Catch e As IOException
      MessageBox("Error accessing the SVG")
    End Try
  end if
  mPVMAGLogo  = new WebPicture
  mPVMAGLogo.MIMEType = "image/svg+xml"
  // important to make the picture available to all sessions of the running app
  mPVMAGLogo.Session = Nil
  mPVMAGLogo.Data = svgData
End If

Return mPVMAGLogo


Sign in or become a jeannot-muller.com member to join the conversation.
Just enter your email below to get a log in link.

You’ve successfully subscribed to jeannot-muller.com
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.