I have an SVG (https://drive.google.com/open?id=1SBA2Xsi228agUO65FmtLwjg6Zuoq59-5) which is shifted. I have tried to change parameters such as width, height, viewBox, and transform attributes. I do not have a clear understanding of this area and it is not as simple as I estimated. I need to draw only the below part and remove the padding.
I do not want to use JS for this. Everything should be in the SVG file and I use it in the tag. The SVG file should not hard code the width and height and should scale as per the tag. It appears that the SVG file draws with left padding by default. I am trying to find the line in SVG that does it.
Related
I have a canvas whose height and width attributes are not mentioned during creation. I update the height and width of it through javascript so that it always fills the viewport height and width. When I use a jpg for the canvas background, it works fine. But when I use a svg, I find that it gets clipped to the default canvas dimension ( 300px x 150px ). But if I set the height and width of the canvas as attributes directly in the tag, then the svg fills the entire canvas properly. Why does SVG behave this way and how can I fix i?
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?
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.
I have a map which pulls in GeoJSON polygons and points.
I represent these using the standard Leaflet methods to create SVG and html markers respectively.
To get an idea: http://i.imgur.com/GSJSZIc.jpg
SVG = blue, markers = green.
Leaflet creates 'panes', div.leaflet-overlay-pane for the SVG, and div.leaflet-marker-pane for markers. The leaflet-marker-pane (bordered in red) covers half the viewport and has a higher z-index then the leaflet-overlay-pane, thereby making the SVG polys under it unclickable.
If I set the zindex of the overlay pane to be less than the marker pane, all the markers are unclickable as the overlay pane covers the whole view port.
I've read some things in the Leaflet Github issues about createPane(), but so far haven't seen it working. Should/will this be something which fixes this problem? ie, puy all markers and SVG polys in the same pane/div.
For the time being I've set the marker pane to be 1px x 1px. This seems to work fine, leading me to ask, why would the marker pane ever be set to half the viewport size?
you have to add your svg into leaflet-marker-pane, for that just use option 'pane' when you add your SVG to the map
L.svgOverlay(svgOverlayElement, map.getBounds(), { pane: 'markerPane' }).addTo(map)
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.