Comments (17)
When outer svg element dimensions are given in percentages it is necessary to know the width and height of the enclosing area where SVG will be shown to get the actual dimensions of SVG by taking given percentages from that area. Currently, in case of percentages the SVG is not rendered at all which is kind of wrong.
Taking the actual dimensions in pixels from viewBox
also looks incorrect, because this is not the purpose of viewBox and it has different meaning than specifying dimensions, it is rather for transformations.
I think the right solution here will be to pass the width and height of the area where SVG will be displayed to the render() function so that it could take the percent fraction from those.
These parameters are already there in render() function:
render(const svgdom::SvgElement& svg, unsigned& width, unsigned& height, real dpi)
But in case of percentages those are not taken into account currently, so it needs to be fixed.
So, after fix, in order to get SVG rendered in case of percentage width or height then the requested width and height have to be specified (to be non-zero) to render() function.
Will this solution work for you?
from svgren.
I need to determine the dimensions and aspect ratio of a given SVG image. At first in the case of a viewbox I got nothing.
A dimension request method would help too! Also to save performance because my first render is just to determine the dimensions of the image.
The above solution helped me. After that I found out that AffinityDesigner (which is my tool for svg images on windows now) has an option to add a viewbox. After unchecking that I got an image from svgren. I still keep the above code in case somone exports an image with viewbox
from svgren.
Why do you need to render to find out resulting image dimensions? You can already now specify dimensions you want right a way, in this case the image will be stretched to requested dimensions.
from svgren.
In some cases I just have the vertical or horizontal pixel dimension and want the aspect Ratio to be respected while drawing the image.
from svgren.
Ok, in this case you need to set the width to your known value and height to 0 (or height to value and width to 0) then the resulting image will be of a correct size with correct aspect ratio, so you only need to draw the image once
from svgren.
You can read the documentation here https://github.com/igagis/svgren/blob/master/src/svgren/render.hpp#L17 it is described there
from svgren.
Ok, thats fine but wouldn't help with a viewbox right now!?
from svgren.
The problem here is not in viewBox, but in percentages. Right now it won't work for percentages, but I'm working on that.
Note, that even after the fix, you will still have to provide width and height of the area where the image is to be drawn to the render() function.
from svgren.
I think I will implement my own method (copied from your source) to determine the initial size of the image respecting the viewbox. Than I will always pass svgren the width and height.
from svgren.
Ok, I had another deeper thought about that. And it looks like nothing has to be done at all.
For percentages problem one has to deal with it outside of the render() function, as you are currently doing. But it looks incorrect to me that you take the width and height from viewBox.
But I would recommend you to avoid using percentages, because in this case SVG simply does not contain any information about the aspect ratio.
Let's say you know the width of the area where you want to draw the SVG image, say it is 600 px.
Then do it like this:
unsigned svgWidth = 600;
unsigned svgHeight = 0;
auto img = svgren::render(..., svgWidth, svgHeight, ...);
//at this point svgHeight will hold the height value calculated using aspect ratio
from svgren.
I can avoid exporting a viewbox but it makes troubles if someone does by mistake.
My Example with viewbox:
<svg width="100%" height="100%" viewBox="0 0 717 717" version="1.1"
and without
<svg width="717px" height="717px" version="1.1"
I can get the aspect ratio from the viewbox. I think this is what firefox does when it renderes the image.
from svgren.
Ok, right, in https://www.w3.org/TR/SVGMobile12/coords.html#IntrinsicSizing I found rules for aspect ratio calculation, it should be taken from viewBox. I will implement that. But one of width
or height
will still have to be provided.
from svgren.
Thank you very much! I'm very happy with svgren!
These issues are the problems I had to fight with on my first attemps of using svgren . At first I thought it didn't work because of the viewbox problems (I would like to protect other people to struggle with the same problems). Now my export from AffinityDesigner is always without viewbox. The biggest issue I had was the one with the defaut black filling.
from svgren.
Fixed. New nuget package should be out in about 15 mins.
Be sure to update both libsvgdom and libsvgren
from svgren.
libsvgren 0.4.1 is released
from svgren.
I think you found a good solution for images with viewbos in percent. Thanks!
from svgren.
if it works for you now, could you close the issue?
from svgren.
Related Issues (20)
- Image element not rendered HOT 5
- add <defs><style></style></defs> support HOT 8
- rgb(%) support HOT 6
- xi:include in svg HOT 1
- Render SVG file by string HOT 1
- cocoapods svgren not found HOT 4
- utki cocoapod doesn't have a lib HOT 5
- Support for stroke-dasharray and stroke-dashoffset HOT 4
- Unresolved external symbol HOT 6
- Not correctly displaying shapes. HOT 8
- Pixel layout & console output HOT 5
- division by 0
- compiling errors after update to the latest version HOT 5
- add <pattern> support
- No Images loaded since last Update HOT 46
- VS2017 v141 toolset link failed HOT 6
- Problem rendering Instagram logo HOT 5
- XCFramework support HOT 10
- Tutorial needs update: requires C++/17 standard, not C++/11 HOT 2
- Artifact when drawing SVG with `circle` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svgren.