Add instructions in README for loading external images

[jasonm23]

Will add to README :

Including bitmap images and other svg

It's possible to include external images, bitmap (png/jpg/gif) and svg, in your themes.

For online resources use their regular url, for offline/local resources we need to generate a file:/// url, see below.

In any block that allows svg, (e.g. :background or :overlay) we'd use an (image) like so:

(image :xlink:href "http://example.com/image.png")

For local/offline, let's assume the image is in the same folder as the theme, we'll need a useful prefix.

(setq themename:fileurl-prefix (concat "file://" (file-name-directory (or load-file-name buffer-file-name))))

Will give you the folder of the theme, so you can then do:

(image :xlink:href ,(concat themename:fileurl-prefix "image.png"))

(image)

(image) will generate an svg <image> tag. See xmlgen for more details.

Note that the xlink: xmlns is already provided for you.

Does your build of Emacs support external SVG resources?

Let us know if it does and what version / build / OS.

[jasonm23]

This needs cleaning up and proofing.

[sabof]

load-file-name is for file-loading, and buffer-file-name for interactive evaluation. You usually need both.

[sabof]

IOW, you could just keep the full version

(concat "file://" (file-name-directory (or load-file-name buffer-file-name)))

[jasonm23]

of course, (or ) until non nil, much neater! thanks.

[jasonm23]

• [x] Rename the fileurl-prefix themename:fileurl-prefix

[jasonm23]

@sabof - which build/version have you had success with external images?

I can only get untouched externals to work with webkit based Emacs-mac-port.

I can use data-uri scheme for png base64, but image/svg+xml,utf8 doesn't work (have not tried base64 svg, will confirm either way.) With this I can get images in librsvg builds.

[sabof]

I've tried 2 different Linux setups, without success. Apparently it's something that used to work in older versions of emacs or librsvg, and no longer does.

[sabof]

FWIW, you can still store images in separate files, you'll just have to include them manually.

[jasonm23]

I've had to include them as base64 for librsvg to render them...

Perhaps I'm doing something wrong.

[jasonm23]

Of course I can also include them as xmlgen, but that's a pain in the back.

[jasonm23]

FWIW, you can still store images in separate files, you'll just have to include them manually.

Maybe you could show me how.

[sabof]

Perhaps I'm doing something wrong.

Not sure I understood. You did manage to embed an SVG within another SVG?

Maybe you could show me how.

This might work, possibly with some caching.

(with-temp-buffer
  (insert-file-contents-literally "image.jpg")
  (buffer-string))

[jasonm23]

Make a data uri

(concat "data:image/svg+xml;base64,"
          (ocodo-smt:string-from-file 
           (concat ocodo-steps-aqua:images "steps-aqua.svg.base64"))))

https://github.com/ocodo/ocodo-svg-modelines/blob/master/ocodo-steps-aqua-smt.el#L26-L29

Then use it with (image :xlink:href uri)

e.g.

(image :x -50 :y 0 :height 26 :width 100 :xlink:href ,url)

[jasonm23]

I could base64 the file on the fly, but no.

[jasonm23]

With Emacs mac port, I don't need to do this, I can use file:/// as the url.

librsvg is supposed to work with externals, but the support isn't complete.

[sabof]

I think we mostly understand each other.

[jasonm23]

What should work is data:image/svg+xml;utf8, but librsvg doesn't render the image properly. (Emacs mac port / WebKit works with this too, as well as file:/// ...

In a nutshell, librsvg is not complete, but it's adequate support.

The 0.1.1 version of my modelines collection is working ok on any Emacs with SVG, so that's adequate.

By the way, librsvg has a command line that will render an svg ➔ png, which will inherit the image size of the rendered content. This might be the ideal way to get accurate width / height measurements for widgets -> rows ...

[jasonm23]

Command line is rsvg-convert

[jasonm23]

Usage:
  rsvg-convert [OPTION...] [FILE...] - SVG Converter

Help Options:
  -?, --help                                                  Show help options

Application Options:
  -d, --dpi-x=<float>                                         pixels per inch [optional; defaults to 90dpi]
  -p, --dpi-y=<float>                                         pixels per inch [optional; defaults to 90dpi]
  -x, --x-zoom=<float>                                        x zoom factor [optional; defaults to 1.0]
  -y, --y-zoom=<float>                                        y zoom factor [optional; defaults to 1.0]
  -z, --zoom=<float>                                          zoom factor [optional; defaults to 1.0]
  -w, --width=<int>                                           width [optional; defaults to the SVG's width]
  -h, --height=<int>                                          height [optional; defaults to the SVG's height]
  -f, --format=[png, pdf, ps, svg, xml, recording]            save format [optional; defaults to 'png']
  -o, --output                                                output filename [optional; defaults to stdout]
  -a, --keep-aspect-ratio                                     whether to preserve the aspect ratio [optional; defaults to FALSE]
  -b, --background-color=[black, white, #abccee, #aaa...]     set the background color [optional; defaults to None]
  -v, --version                                               show version information
  --base-uri                                                  base uri

[jasonm23]

Although I suspect that width of the render will be derived from a containing element and not the actual text...

I need to experiment.

[jasonm23]

Ok, that's a bust. The SVG root element must spec the w/h.

I'll continue this on the correct thread.