New MARGIN-DIVIDER parameter

[zevlg]

To control how much space is used for margins (in case resulting svg icon is larger then original svg image), MARGIN-DIVIDER parameter introduced.

The larger value for MARGIN-DIVIDER you specify the less space will be used for margins.

By default, MARGIN-DIVIDER is 2, to keep original svg-icon functionality.

[rougier]

Thanks for the PR. I'm not sure to understand the exact use case. Do you mean this for case where the original svg has already some inner border and you want to reduce them? I though about adding an option for inner padding (in pixels) for adjusting the relative sive of the icons. For example, material icons have padding whereas boxicons haven't. It would be nice to be able to ajust such inner padding using a positive or nuegative number of pixels (x zoom).

[rougier]

Also, in the documentation, I think we'll need some ascii art to explain all the different parameters.

[zevlg]

Here is the screenshot to demonstrate it. First image you get by default

Second (note that resulting image has same size as first one) you get when you increase margin-divider

Te get larger margins, just supply margin-divider less then 2

[zevlg]

Thanks for the PR. I'm not sure to understand the exact use case. Do you mean this for case where the original svg has already some inner border and you want to reduce them? I though about adding an option for inner padding (in pixels) for adjusting the relative sive of the icons. For example, material icons have padding whereas boxicons haven't. It would be nice to be able to ajust such inner padding using a positive or nuegative number of pixels (x zoom).

pixels for margins are not good here, because you don't know resulting image size, thats why margin-divider is better option

[rougier]

I'm not too fond of the name though. We could use outer-zoom (or outer-scale) for current zoom and inner-zoom (or inner scale- for margin-divider. And a default parameter of 1 for no change would be better. An inner zoom > 1 would enlarge the icon (and reduce the margin) while a inner zoom < 1 reduces the apparent size.

[zevlg]

Yeah, I don't like margin-divider name as well, but it was straightforward thing to implement with minimal changes to the code.

Possible better name is inner-scale as you proposed with opposite meaning to margin-divider, so default value for inner-scale would be 1 to have current logic, right?

[rougier]

inner-scale might be better and we could use scale of the outer-scale. I've lookd at the code and I'm not sure how you implemented it. For me, it's only a matter of re-dimensioning the viewbox (after it has been computed) such that ideally, a scale of 1 and an inner scale of 1 should give the same pixel size as for a scale of 10 and inner scale .1.

[zevlg]

Here is I've got some API design ideas - https://gist.github.com/zevlg/c34866779044af8d6d62aac4019d0f0e

Possible good solution could be just a margin paramater, that resembles image's property :margin:

• If margin is number then it is applied for both vmargin and hmargin
• If margin is cons cell, then car is for hmargin and cdr is for vmargin
• If float value is used for margin, then it specify relative value to width or height
• if integer value specifies margins in pixels

This kind of API allows to create svg icons with almost any layout

What do you think?

[rougier]

I think it's great and your ascii art is really nice (we should include in the comments). By the way, I think the vmargin should be on top in the diagram. I'm just worried that user can change the aspect ratio but I can live with that.

[jasonm23]

Following this PR now, I wanted to include the notes posted by @zevlg in the conversation, so they're in here as Markdown. Also perhaps to prompt for attention on the PR too.

---

svg-icon api design

We want transform original SVG image, with specified viewbox:

        original viewbox: ov-x ov-y ov-width ov-height
                       .-------.
                       |       |
                       |       |
                       |       |
                       `-------'

Into following SVG image:

                  <---- svg-width ---->
                  |                   |
                  |                   |
                  |   |               |
                  |  -|<--view-width->|
                  |   |               |
                  | view-x            |
                  v   |               v
                  .---|---------------.<-----------------
                  |   v               |                 ^
      -|-view-y ->|-->.-----------.   |                 |
       |          |   |           |   |                 |
       |          |   |           |   |                 |
   view-height    |   |           |   |            svg-height
       |          |   |           |   |                 |
       |          |   |           |   |                 |
      -|-------|->|-->`-----------'   |                 |
          vmargin |   ^               |                 v
             --|->`---|---------------'<-----------------
                  ^   ^
                  |   |
                  hmargin

svg-width and svg-height are strictly 2x1 chars in pixels multiplied by zoom parameter.

We want specify margins (vmargin and hmargin) in pixel and relative form:

• Use integer value for margins to specify it in pixels
• Use float value for margins to specify relative value (to width/height)

API should provide a way to force some size values in resulting svg icon. For example user might want to create svg icon with vmargin as 0.1 of svg-height, svg-icon should keep aspect ratio of origin view box in this case by calculating hmargin.

If all sizes are forced, the aspect ratio of original view box is ignored and all sizes are calculated from parameters given to svg-icon.

[rougier]

Thanks for the update. Best would be to open an issue o the svg-lib package which kind of replace this ones. For svg-lib, I added extra controls on the svg output.