I am importing an SVG using the SVGLoader and turning each path into a mesh that is then put into a group. When I do so, the group is much larger than I would like it to be. Rather than scaling, I'd like to import it at the correct size to begin with. When I change the width and height attributes on the SVG: <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"> nothing changes with respect to the size of the rendered meshes. I haven't seen anything actually describing how SVG sizes are determined by the loader. Is it a viewbox? Is there something special that has to be done?
In your 3d world, you can only change the size of your object by Object3D.scale.set(x, y, z),and the x, y, z value determine the size of your mesh in you 3d world. When you change the width and height attributes on the SVG, you can only change the resolution but not the size
Related
I am confused how to properly define viewport and viewbox in SVG file to convey shapes that have real world physical units.
I am mapping my AutoCAD design to a SVG file. The units in my AutoCAD file are defined in millimeters (mm). Image below shows my AutoCAD design. The orange box (16mm x 9mm) are my boundaries for visible part of the SVG file, thus anything outside the orange box will get cut off. My end application requires a PNG image that is a specific resolution, 1920x1080. (Notice how the aspect ratio is the same).
In my SVG file, all shapes (elements) are defined without units, however I know the values are in millimeters in the physical world. For example, below is an example of a circle. The radius of the circle is 0.474mm as set in the AutoCAD file.
<circle cx="1.22996130982" cy="2.27139057943" r="0.474" />
My question is, how do I properly define the viewport and viewbox in my SVG file? How do I properly define the viewport/viewbox such that the physical units in real world get scaled to fit in my desired image resolution?
I used the following method below to define my viewport/viewbox. However, this approach did not work. The resulting SVG image was a canvas of 1920x1080 however all my shapes were very tiny and it did NOT cut off the shapes desired outside the orange boundary box.
<svg width="1920px" height="1080px" viewbox="0 0 16mm 9mm">
<circle cx="1.22996130982" cy="2.27139057943" r="0.474" />
<!-- Other shapes in SVG here-->
</svg>
My ultimate goal is to export designs created in mobile apps as vector graphics. Say I have a list of points of corners of shapes and the respective color that goes inside each shape and this design is being displayed on a mobile app (iOS and Android because cocos2d-x is being used). Is it possible to convert this information into a vector file (SVG file which is essentially an XML file)?
SVG contains a path element that stores the lines that make up a shape's path. The d attribute stores a path string, and the style attribute stores the path's styling, such as stroke and fill. To export a shape to SVG there are several things you should care about:
The size of the SVG in pixels (the width and height attributes).
Example:<svg width='640px' height='640px'
The size of the shape in pixels (the viewBox attribute: left, right, width, height).
Example:viewBox='0 0 100 100'
The color used to stroke the shape and the stroke width.
Example:style='stroke:red;stroke-width:1px' or style='stroke:none;'
The color used to fill each shape.
Example:style='fill:blue;' or style='fill:none;'
The shape of the path.
Example:d='M10 10L20 20 L30 10Z'
Each path is divided into commands. The M command moves the pen,
the L command draws to a new position, and the Z command closes the shape.
There can be any number of paths in a single SVG file.
Example SVG file:
<svg width='640px' height='640px' viewBox='0 0 100 100'
xmlns='http://www.w3.org/2000/svg'>
<path style='stroke:red;fill:none' d='M10 10L20 20 L30 10Z'/>
</svg>
I've a question about svg's viewbox, in my opinion it's like a window on an infinite svg plan, and its boundaries are set in the viewBox attribute of the svg element. It represents the rectangle between the 2 coordinates in the svg plan. So a viewBox of "0 0 1000 500" shows the window between (0,0) and (1000,500) of the svg plan.
And when I make viewBox (2000, 0, 3000 500) i see the window of (2000,0) and (3000,500). x and y scaling is unmodified: in both cases i'm displaying 1000 * 500 units of the svg plan.
But apparantly i go wrong some where. I'm experimenting with animating the viewbox to emulate some kind of ticker display, leaving the y coordinates untouched but changing the x coordinates (without changing the actual number of units displayed) but that goes wrong. Somehow my y-scaling changes.
In a modern browser you can verify yourself (pull the slider to change the viewBox).
What did I miss in the SVG specification?
You missed the preserveAspectRatio attribute in the SVG specification. It forces the aspect ratio of what you see in the viewbox to be preserved by default. Sounds like what you're after is preserveAspectRatio="none"
I am working on an svg export utility for a drawing program on android. I am having a problem that the behind blur is cutoff past the shape boundaries - looks like i need to resize the viewBox or increase the margin or something. Does anyone know the best way?
The test file url is here - it downloads as the mime type isn't setup correctly on the server and I cant restart it at the moment :(. There are embedded images and fonts in the file, Which is why it's big. But if you save it to disk you can open in chrome, ff, etc...
An enlarged example of this problem is given. Notice the square edges on the orange glow.
The filter canvas has default values : x=y=-10% and width=height=120%. You can change them with the x, y, width and height attributes on the filter element.
Try to set a bigger canvas :
<filter x="-50%" y="-50%" width="200%" height="200%"/>
Yet, since the canvas is bigger, there will be performance loss.
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.