SVG

Code can read in SVG from an external file and display it inside a Jupyter notebook.

To get started you start up VSCode. Then use Ctrl+Shift+p to open a new jupyter notebook. In the new notebook choose the Julia language (instead of Python) Write julia code! Then use Alt+enter, ctrl+enter etc. in the usual way. The SVG will be displayed in the result area of the cell.

This code is an example of the above:

            open("../images/CoriolisGod.svg", "r") do f
                s = read(f, String)
                display("image/svg+xml",s)
            end
            

The file of source code created in this way is a jupyter notebook and has the extension ipynb. It looks as if the svg is saved in the file as when the file is reloaded the svg image is displayed immediately without having to rerun the code.

This raises the issue of whether a Julia program could create an SVG diagram from scratch, i.e. not reading it in from an external file, and then display it. This seems to be a good productive loop for exploring diagram creation.

Running from VSCode means that files can be read from and written to the local drive without any issues.

Arrow

Evidently, Julia code can contain hard-coded SVG:

            arrow = """<svg viewBox="-150 -150 300 300" width="300" xmlns="http://www.w3.org/2000/svg">
                <rect x="-150" y="-150" width="300" height="300" fill="steelblue"/>
                <circle cx="0" cy="0" r="10" fill="orange"/>
                <!-- Arrow starts at origin and points east. -->
                <g id="arrow" stroke="black" stroke-width="2" fill="black">
                <path d="M0 0 l50, 0" />
                <path d="M50 0 l-5 5 l0 -10z" />
                </g>
                <!-- Arrows can now be drawn with 'use' e.g. using transform and rotate() -->
                <use href="#arrow" x="0" y="0" transform="rotate(-45)"></use>
                <use href="#arrow" x="0" y="0" transform="rotate(-90)"></use>
                <use href="#arrow" x="0" y="0" transform="rotate(-135)"></use>
                <use href="#arrow" x="0" y="0" transform="rotate(-180)"></use>
                <use href="#arrow" x="0" y="0" transform="rotate(-225)"></use>
                <use href="#arrow" x="0" y="0" transform="rotate(-270)"></use>
                <use href="#arrow" x="0" y="0" transform="rotate(-315)"></use>
                </svg>"""
            display("image/svg+xml",arrow)
            

When the above code is executed inside a Jupyter notebook it produces the following picture:

The above code shows that the rotate function uses degrees rather than radians. A positive rotation is clockwise, negative is anti-clockwise.