Why do elements NOT maintain their relative size when imported?
Why do elements NOT maintain their relative size when imported?
Answered
R
Ray Craighead
On
Sun, 20 May, 2018 at 11:26 PM
I have two elements I've exported as SVGs. Both contain an identical element. One contains an additional element (I'm trying a workaround for the "Drawing Order" limitations within VS). But when I import the two elements they are each at an entirely different scale. In fact, the second element fits into the bounding box of the first. Why? I want them to maintain their scale so they will line up with one another. Scaling something accurately in VS is impossible.
M
Mike Metcalf
Best Answer
On
Sun, 20 May, 2018 at 11:26 PM
Answer 1) If you just want the front cog to draw first, followed by the back cog, then you don't have to use multiple elements. Explain what you want and attach your SVG
Answer 2) How to create multiple SVG elements that will import in the same relative scale and alignment that they shared in illustrator:
For example if you have 3 images that need to align perfectly: 1) draw them, scale them and align them in AI 2)
use the ellipse tool to make an ellipse that just barely encloses all
of the strokes and fills. put it on the bottom layer, make it a white
fill with no stroke. change its opacity to 0% 3) when you export the separate SVGs, export the ellipse with each one. 4)
when you import them into videoscribe, import them immediately one
after the other without changing the camera position. Click "set camera" after importing each one, if you want them all to share the same camera position.
If you did it correctly, the elements should be sized and aligned perfectly and they should share the same center point so they should
scale well if you select them all and scale them together.
Adding the large ellipse will make the elements import at smaller sizes with identical overlapping bounding boxes. You may have to use a higher import quality setting to keep elements sharp.
-Mike (videoscribe user)
Matthew Cook
On
Mon, 21 May, 2018 at 2:34 PM
Please attach the SVGs here and I can take a look for you.
M
Mike Metcalf
On
Mon, 21 May, 2018 at 6:32 PM
Answer 1) If you just want the front cog to draw first, followed by the back cog, then you don't have to use multiple elements. Explain what you want and attach your SVG
Answer 2) How to create multiple SVG elements that will import in the same relative scale and alignment that they shared in illustrator:
For example if you have 3 images that need to align perfectly: 1) draw them, scale them and align them in AI 2)
use the ellipse tool to make an ellipse that just barely encloses all
of the strokes and fills. put it on the bottom layer, make it a white
fill with no stroke. change its opacity to 0% 3) when you export the separate SVGs, export the ellipse with each one. 4)
when you import them into videoscribe, import them immediately one
after the other without changing the camera position. Click "set camera" after importing each one, if you want them all to share the same camera position.
If you did it correctly, the elements should be sized and aligned perfectly and they should share the same center point so they should
scale well if you select them all and scale them together.
Adding the large ellipse will make the elements import at smaller sizes with identical overlapping bounding boxes. You may have to use a higher import quality setting to keep elements sharp.
-Mike (videoscribe user)
R
Ray Craighead
On
Mon, 21 May, 2018 at 9:57 PM
I will upload the SVGs when I return home.
Adding a shared "Bounding Box" makes sense. Thanks for that good solution.
As for drawing the "Back" element after the "Front" element, that exactly what I need to do. The threads I found indicated it was not possible. Is there a "Step-by -step" I could read about it?
M
Mike Metcalf
On
Tue, 22 May, 2018 at 12:45 AM
several threads cover the drawing order of SVGs based on layer order and subfolders (which can be viewed in Adobe Illustrator, but not in Inkscape I believe).
Basically, you can put one part of a drawing in what is essentially a nested layer group or subfolder, which allows it to be lower in the layer list than another part of the drawing, and "behind/underneath" the other drawing on the videoscribe canvas, but it will still be drawn after the other part of the drawing.
If that doesn't make sense, its probably just easier to edit your SVG for you.
-Mike (videoscribe user)
R
Ray Craighead
On
Tue, 22 May, 2018 at 1:04 AM
Yes, that makes sense. I've done it by accident and driven myself crazy. The down side is that the "two" elements are one so they cannot be moved individually in VS. It's a work-around, but much better than nothing. Thanks for the suggestion.
R
Ray Craighead
On
Tue, 22 May, 2018 at 2:33 AM
One of my workarounds is to build an object with a "notch" out of it so it will "appear" to draw behind another object. Of course, that means the element is worthless on its own.
R
Ray Craighead
On
Tue, 22 May, 2018 at 2:36 AM
I don't believe my original question has been answered: Why do images lose their relative scale when imported?
If I create two elements in an external illustration tool I expect them to import at the same scale as they were exported. Isn't that logical?
every imported SVG has an "bounding box" that defines its exact height and width based on area covered by its stroked and filled paths (and any embedded images, I assume).
When you import an SVG into videoscribe, videoscribe looks the height and width of each image and scales it to the greatest porportional size that does not exceed some preset percentage of the height or width of the visible canvas area. (I don't know exactly what that percentage is.)
That's why if you import multiple images, without changing the camera position, either the left/right or the top/bottom of each bounding boxes will line up perfectly. (as shown in your original post)
-Mike (videoscribe user)
R
Ray Craighead
On
Tue, 22 May, 2018 at 3:47 AM
You're a very patient contributor, Mike. I'm sure your observations are accurate. I am just confounded why an app like this should rescale elements I've carefully scaled before importing. It makes no logical sense to me. Therefore, I'm forced to use a workaround that further complicates the process and adds unnecessary points to the SVG.
M
Mike Metcalf
On
Tue, 22 May, 2018 at 8:24 PM
I think the reasons are something like this:
There's no common standard for sizing SVG images since they are infinitely scalable.
If I import a dozen SVGs from different sources, the largest one might be more than 100 times larger than the smallest.
If videoscribe does not automatically scale them upon import:
1) I'll have to spend a lot of extra time just getting the huge ones and the tiny ones close to the same size and
2) because of the way videoscribe uses vector and raster copies, the ones that start out tiny will be very blurry when enlarged, and the ones that start out huge will take up a LOT of extra memory and processing power when rasterized.
-Mike (videoscribe user)
R
Ray Craighead
On
Wed, 23 May, 2018 at 3:59 AM
That explanation makes sense. Not at all what I’m used to, but plausible.
A
Alan Kmiecik
On
Mon, 1 Mar, 2021 at 1:02 PM
did not see where the original question was answered: Why do elements NOT maintain their relative size when imported?
M
Mike Metcalf
On
Mon, 1 Mar, 2021 at 4:59 PM
It looks as though the title question was asked again, and then answered, in the four replies immediately above yours.
If you want a comment from a Sparkol staff member, you may be able to get that here in the users forum, or you could raise a ticket to contact customer support directly.
I have two elements I've exported as SVGs. Both contain an identical element. One contains an additional element (I'm trying a workaround for the "Drawing Order" limitations within VS). But when I import the two elements they are each at an entirely different scale. In fact, the second element fits into the bounding box of the first. Why? I want them to maintain their scale so they will line up with one another. Scaling something accurately in VS is impossible.
If you just want the front cog to draw first, followed by the back cog, then you don't have to use multiple elements. Explain what you want and attach your SVG
Answer 2)
How to create multiple SVG elements that will import in the same relative scale and alignment that they shared in illustrator:
For example if you have 3 images that need to align perfectly:
1) draw them, scale them and align them in AI
2) use the ellipse tool to make an ellipse that just barely encloses all of the strokes and fills. put it on the bottom layer, make it a white fill with no stroke. change its opacity to 0%
3) when you export the separate SVGs, export the ellipse with each one.
4) when you import them into videoscribe, import them immediately one after the other without changing the camera position. Click "set camera" after importing each one, if you want them all to share the same camera position.
If you did it correctly, the elements should be sized and aligned perfectly and they should share the same center point so they should scale well if you select them all and scale them together.
Adding the large ellipse will make the elements import at smaller sizes with identical overlapping bounding boxes. You may have to use a higher import quality setting to keep elements sharp.
-Mike (videoscribe user)
Please attach the SVGs here and I can take a look for you.
If you just want the front cog to draw first, followed by the back cog, then you don't have to use multiple elements. Explain what you want and attach your SVG
Answer 2)
How to create multiple SVG elements that will import in the same relative scale and alignment that they shared in illustrator:
For example if you have 3 images that need to align perfectly:
1) draw them, scale them and align them in AI
2) use the ellipse tool to make an ellipse that just barely encloses all of the strokes and fills. put it on the bottom layer, make it a white fill with no stroke. change its opacity to 0%
3) when you export the separate SVGs, export the ellipse with each one.
4) when you import them into videoscribe, import them immediately one after the other without changing the camera position. Click "set camera" after importing each one, if you want them all to share the same camera position.
If you did it correctly, the elements should be sized and aligned perfectly and they should share the same center point so they should scale well if you select them all and scale them together.
Adding the large ellipse will make the elements import at smaller sizes with identical overlapping bounding boxes. You may have to use a higher import quality setting to keep elements sharp.
-Mike (videoscribe user)
I will upload the SVGs when I return home.
Adding a shared "Bounding Box" makes sense. Thanks for that good solution.
As for drawing the "Back" element after the "Front" element, that exactly what I need to do. The threads I found indicated it was not possible. Is there a "Step-by -step" I could read about it?
Here is one of the threads that may shed some light on the subject: http://help.videoscribe.co/support/discussions/topics/1000029885
Basically, you can put one part of a drawing in what is essentially a nested layer group or subfolder, which allows it to be lower in the layer list than another part of the drawing, and "behind/underneath" the other drawing on the videoscribe canvas, but it will still be drawn after the other part of the drawing.
If that doesn't make sense, its probably just easier to edit your SVG for you.
-Mike (videoscribe user)
Yes, that makes sense. I've done it by accident and driven myself crazy. The down side is that the "two" elements are one so they cannot be moved individually in VS. It's a work-around, but much better than nothing. Thanks for the suggestion.
One of my workarounds is to build an object with a "notch" out of it so it will "appear" to draw behind another object. Of course, that means the element is worthless on its own.
I don't believe my original question has been answered: Why do images lose their relative scale when imported?
If I create two elements in an external illustration tool I expect them to import at the same scale as they were exported. Isn't that logical?
Here are the two SVGs requested by Matthew.
https://www.dropbox.com/s/m6s8x72kmfomp98/Asset%2013.svg?dl=0
https://www.dropbox.com/s/xyp1aph9hfb0pox/Asset%2014.svg?dl=0
I see I cannot upload an SVG. Hmmm.
Based on my observations:
every imported SVG has an "bounding box" that defines its exact height and width based on area covered by its stroked and filled paths (and any embedded images, I assume).
When you import an SVG into videoscribe, videoscribe looks the height and width of each image and scales it to the greatest porportional size that does not exceed some preset percentage of the height or width of the visible canvas area. (I don't know exactly what that percentage is.)
That's why if you import multiple images, without changing the camera position, either the left/right or the top/bottom of each bounding boxes will line up perfectly. (as shown in your original post)
-Mike (videoscribe user)
You're a very patient contributor, Mike. I'm sure your observations are accurate. I am just confounded why an app like this should rescale elements I've carefully scaled before importing. It makes no logical sense to me. Therefore, I'm forced to use a workaround that further complicates the process and adds unnecessary points to the SVG.
I think the reasons are something like this:
There's no common standard for sizing SVG images since they are infinitely scalable.
did not see where the original question was answered: Why do elements NOT maintain their relative size when imported?
It looks as though the title question was asked again, and then answered, in the four replies immediately above yours.
If you want a comment from a Sparkol staff member, you may be able to get that here in the users forum, or you could raise a ticket to contact customer support directly.
-Mike (videoscribe user)