I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)
I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.
While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,
ViewBox.svg will expand to fill the width and height (linked from here)
PreserveAspectRatio.svg will be padded to stay in the upper left (linked from here)
This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.
The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.
Related
I Have a viewport and a scaled image inside like this:
both the images are scaled to 0.1 but the one inside the viewport is of less resolution
Is there anyway to fix this?
The Viewport has a size, that size sets the resolution at which the contents of the Viewport will be rendered. And it does not have to match the size at which it is displayed (it could be stretched/scaled).
With the ViewportContainer you can decide if it will automatically set the size of the Viewport or if it will stretch it (scaling the ViewportContainer will also result in stretchering). If you prefer to not use the ViewportContainer※, set the size of the Viewport in the Inspector or form code.
※: For example, you can display a ViewportTexture with a TextureRect, which will give you more control on how it is displayed. But it is less convinnient to setup.
I have a large SVG image (.svg file on my disk, not an element in a webpage) which has the viewBox parameter on the SVG element set to crop the image. Rather than cropping, I want to show the entire SVG image. How can I figure out what values I need to put in for height and width in order to show the full image without cropping or extra whitespace?
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
I have a figure in restructured text using a scale directive as follows:
.. figure:: images/my_image.svg
:scale: 150 %
The the image is perfectly OK in the HTML output of sphinx, except that it is not scaled. (The svg image has width and height information and a viewBox)
It is strange, that in contrast to png figures, the <img> tag in the HTML file does not contain width and height attributes of the image (hm, can't sphinx determine width and height of the svg for some reason?).
What is the reason for this? Does sphinx support the :scale: directive for svg figures?
You may try setting the width. This can also be assigned a percentage of the current line width as value.
.. figure:: images/my_image.svg
:width: 100%
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.