TIP: when editing svgs - for section view and zoom in & out

[A Gloom]

For when editing svg's in tiddler edit mode, to manually select section view and zoom in & out of svg in the preview window-- temporarily edit the svg viewBox and width attributes.

<svg viewBox="0 0 100 100" width="100">

To change view to certian area:

left half only of svg:
viewBox="50 50 50 50"

To zoom in: width="200"
    or edit 3rd & 4th number of viewBox smaller:
    viewBox="0 0 50 50"
To zoom out: width="50"
    or edit 3rd & 4th number of viewBox smaller:
    viewBox="0 0 200 200"

Combine the two to view sections with zoom in.

The viewBox and width attributes can be changed back to original settings when done editing.

[Joshua Fontany]

Great to see more SVG notes!

You can also:

<svg viewBox="0 0 100 100" width="100">

{{$:/images/someLibrary/someIcon}}
</svg>

Where `$:/images/someLibrary/someIcon` is a valid SVG (such as this one from the Wc3 examples, slightly edited):

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <title>Example triangle01- simple example of a 'path'</title>
 <desc>A path that draws a triangle</desc>
 <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" />
 <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /> 
</svg>

Then, changing the size or viewBox values of the outerSVG will effect how the inner SVG is laid out.

Here is a good reference for stacking viewBoxes:
https://www.sarasoueidan.com/blog/nesting-svgs/

Best,
Joshua F

[Mohammad]

A. Gloom,

 These are great stuffs. Why not create a wiki on tiddlyspot like

agloom.svglibrary.tiddlyspot.com

and link tiddler here! This way one can use it like tutorial or example resource.

Just some thoughts

--Mohammad

[Mohammad]

Added to TW-Scripts.

[Mohammad]

Added to TW-Scripts.

On Monday, April 27, 2020 at 9:16:39 AM UTC+4:30, A Gloom wrote:

[A Gloom]

@Mohammad

ty  I have a temporary wiki -- the svg live demo-- that I'll be moving to my GitHub repo once i get some time

been busy converting my svg maps from external script assembled to tiddlers selectively assembled in a svg shell tiddler using transclusions controlled by fields, buttons, selects and checkboxes.  It was a major undertaking-- the main external svg was about a megabyte in size with a city and surrounding area with about 400 roads and 1800 buldings.

Will be making a short video showing my wiki in action-- takes too many screenshots now.

@Joshua

thanks for the tips and link-- always searching for svg references.