New and Updated SVG Editor for Rhino - Available in Rhino 8.9

Rhino
, ,
1

Good morning all,

I have been working on a new and updated SVG Editor to replace the existing one. It is currently available in the Rhino 8.9 SRC for testing!

How to Access

Run the hidden command TestSvgEdit

Editor Toggle

Toggling this setting to New will toggle which editor appears by default when you edit toolbar buttons, create new ones, or create Script Editor Icons. If you love it, you can keep using it, if you don’t, please tell me why below and I’ll see if I can’t fix your issues :slight_smile:

I hope you all enjoy it, and furthermore, I hope you all have lots of lovely requests for it!

Features

My aim is to reach feature parity with the existing editor and massively succeed it in terms of usability and usefulness.

svg-editor
svg-editor1571×923 138 KB

1 - File IO

New File / Import / Save / SaveAs
Note: that SVGs that cannot be fully supported will offer to be imported as a background image

2 - Standard Tools

Select / Line / Rectangle / Bezier Curve / Circle / Ellipse / Polyline
Note : Curves are … overzealous … after the 4th click, still a WIP

3 - Light / Dark Mode

The new editor combines light and dark icons. SVG Elements can have different properties between Light / Dark Mode.
Note : Rhino does not render this embedded light/dark data yet, TBC

svg-editor-light-dark
svg-editor-light-dark1571×923 113 KB

4 - SVG Properties Panel

Edit any valid property of SVG Elements, the join and caps also show multi-select, and all propertiy updates will change everything selected.

5 - Layers

Drag and drop elements behind and infront of each with precision
Note : This doesn’t seem to work on Windows for me now? Mac is fine. Typical.

svg-editor-layers
svg-editor-layers1571×923 142 KB

6 - Pixel Preview

Pixel preview gives you a zoomed in representation of your icon at that size. The elements are fully editable whilst in this mode, so you can edit, nudge, update properties and pixel-peep to your hearts content until your icon is pixel perfect.

svg-editor-pixel-preview
svg-editor-pixel-preview1571×923 118 KB

7 - Grid Snapping

Grid snapping will set the snapping for new items, editing items, and nudging
Note : This is not quite right in the 24x24 px preview

Things to note

  • SVG is a HUGELY compex spec compared to a Bitmap, and hence, many SVG files (i.e Rhino Icons) will not be editable quite yet. I aim to improve SVG Spec support as time goes on and am curious how best to handle un-editable files in the meantime
  • As mentioned above, the light dark mode is not supported by Rhino Icons just yet
  • This is a work in progress, so not everything will be perfect just yet

– cs

23 Likes
2

Cool! Will there be a simple text tool? It can be even only one font that scales well and is easy to read, often a single or two letters next to the icon will do it. Letters are especially helpful when doing icons ad-hoc and for example, I don’t want to think how to design two button icons where 1. performs an action for only one object, 2. acts on all objects. With the text tool, I would simply distinguish them by adding the “A” letter and I don’t want to draw it with sticks.

2 Likes
3

Nice Tool! Is it possible to add an option to display the grid, I modified the rhino theme and the grid lines seem to disappear in dark mode, does the color of the grid lines automatically adjust according to the current background?

4

That’s the goal. I just need to work out a fool proof way to create and edit text as problems with missing fonts can be a pain. I can definitely see text being a useful tool.

So sorry about the late reply, I’ve updated discord settings so I don’t miss replies like this.

5

The Gridlines should adjust to light/dark mode. The colours are defined by a Rhino settings for the workspace. The canvas background should be identical to your rhino background. Can you show me what you see with the latest RC?

So sorry about the late reply, I’ve updated discord settings so I don’t miss replies like this.

6

I tried to save the svg, but I didn’t save any information。
This feature is available in the old editor

image
image956×812 118 KB

image
image836×494 84.2 KB

7

new_svg_edit
new_svg_edit850×750 64.7 KB

I changed the color of the theme, I hide the grid in some places in the theme, and the new svg editor’s grid probably uses the same color now, so it’s not visible. I think it should be better if I can adjust the color of the grid as well as hide the grid sometimes.

8

Why does Rhino need a stand alone SVG editor?
I think that import/export are important, but I would rather have a better Rhino, even a better SVG import/export. (No, I have not noticed anything wrong with it.)

Perhaps this is part of something larger, but it seems kind of like, a pudding before meat thing.

1 Like
9

You are editing an existing icon, correct? But you cannot save it currently?
Does this YouTrack accurately describe your issue?
https://mcneel.myjetbrains.com/youtrack/issue/RH-83334

10

Can you tell me which colours you changed so that I can try to replicate this issue? The gridlines are the light/dark mode inverted so that it should always work.

11

Most of the work for the SVG editor is in the import/export code. The spec is collosal, the import/export code should also hopefully be usable to improve SVG import/export within Rhino. As you can imagine, the editor makes debugging nicer.

As for why rhino needs one, it did allow for fully editing pixel icons, and we’d like to continue to allow for users to edit icons, and since we now use SVG for them, it’s an SVG Editor. there are also many other goals with the editor to improve Rhinos icon editing.

A large part of it is also me learning the Rhino code base as I am new :sunglasses: .

3 Likes
12

You asked for thoughts on another thread, so I will post it here.

Wishes:

  1. Box Scale for Path. (Path just allows points only. Need to scale entire path)
  2. Boolean operations. (Minus front/back & combine)
  3. Text tool (Been asked already)
  4. Gradient color ( So many existing Rhino buttons have gradients in the buttons)
  5. Delete and add points to path

Just a few requests on the tools I use in my current vector editor when I create my rhino buttons.
Its will be great to edit my custom buttons right from rhino. I currently have repository of all my custom buttons in Illustrator template. It will be nice to keep and edit them in rhino.

1 Like
13

Every element has a scale method, I just need to add grips, good request.
https://mcneel.myjetbrains.com/youtrack/issue/RH-83433/Allow-SVG-Elements-to-be-scaled

Tricky. I could probably allow this with clipping … → https://mcneel.myjetbrains.com/youtrack/issue/RH-83434/Allow-SVG-Elements-to-perform-boolean-operations-on-each-other

Yep → https://mcneel.myjetbrains.com/youtrack/issue/RH-83046/Text-Command

Currently a WIP, I need to add support for defs as well, but I have managed to get this reading/writing. https://mcneel.myjetbrains.com/youtrack/issue/RH-80249/SVG-import-from-Rhino-needs-to-support-gradient-hatches

Good idea → https://mcneel.myjetbrains.com/youtrack/issue/RH-83436/Allow-for-paths-to-have-points-added-and-removed

Thanks for the reuqests @jason :slight_smile:

1 Like
14

GH2icon is also an icon-drawing component available, and there is a possibility to merge the two in the future？

image
image1592×1125 72.2 KB

15

Hey @Archi-BC, I’m not sure. I like the GH2 editor, but it is a bit tricky, and quite opinionated, which is excellent for GH, but I think less excellent for Rhino, as it stands. Are there features you want from one in the other, or you’d rather they were 1 feature?

16

I’d like to see the two stand on their own, but I’d also really like to see some handy features of GH2Icon coming into the svgEditor

1 Like
17

Which features do you like @Archi-BC?

18

I’m on Rhino 8 SR11 2024-8-20 (Rhino 8, 8.11.24233.01001) and I don’t understand how to use the fill color.

19

Currently you can only change existing items and cannot set the colour before creating them. I am currently working on this ticket because it’s annoying :slight_smile:
https://mcneel.myjetbrains.com/youtrack/issue/RH-82217

1 Like
20

Thanks :pray: