Open zevlg opened 3 years ago
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).
Also, in the documentation, I think we'll need some ascii art to explain all the different parameters.
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
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
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.
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?
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.
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
:
margin
is number then it is applied for both vmargin
and hmargin
margin
is cons cell, then car is for hmargin
and cdr is for vmargin
width
or height
This kind of API allows to create svg icons with almost any layout
What do you think?
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.
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.
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:
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
.
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.