search

Deep-Symmetry / bytefield-svg

Node module that generates byte field diagrams in SVG format
Eclipse Public License 2.0
126 stars 20 forks source link

Consider an option to set the viewport #10

Closed brunchboy closed 4 years ago

brunchboy commented 4 years ago

@Mogztter suggests defining the viewBox attribute in order to allow diagrams to resize.

As currently generated: No viewBox

With viewBox and max-width: 100%: With viewBox

Since the current behavior is consistent with other image formats like PNG, I think it should probably remain the default, but it would be nice to offer people an option to adjust these settings.

Although, looking at those examples, it does resize very nicely, so that should perhaps be the default.

brunchboy commented 4 years ago

I was unable to reproduce his results. Adding viewBox did not make it resizable. I then doing that and removing the width and height attributes, and the diagrams disappeared completely. Finally, I tried adding viewBox and width="100%" and the diagrams did become scalable, but they only took up half of the available content area width, so normal diagrams with sixteen columns were tiny, half as big as they should be, and diagrams with four columns were huge, double the size I wanted.

So unless there is more information about how to do this, I need to stick with my original design intent of fixed-size images. I’ll leave this open for a while in case further information comes in.

brunchboy commented 4 years ago

After further clarification from @Mogztter I have been able to verify that simply adding the viewBox allows the SVG to be responsive at the discretion of the CSS. max-width is a CSS style, and applying it in combination with the width, height, and viewBox SVG attributes makes the diagrams behave very attractively at all window sizes of my documentation sites.