I'm currently using the following code to export a region on a layer using paper.js:
var boundsArtboard = new Rectangle({x:10,y:10, width:100, height:100});
var svg = paper.project.exportSVG({asString:true,precision: 5, bounds:boundsArtboard});
When I view the exported SVG in a web browser it appears correctly. However, if I open this SVG file in Illustrator, the SVG file contains all objects that exist on that currently layer. See attached SVG image example. How do I just export the objects in the bounds and not everything on the layer?
Example SVG export
Create a new temp layer
Loop all objects and check if they intersect or contain segments inside boundsArtboard rectangle
If they do, clone path and add it to tempLayer
Export tempLayer
Delete tempLayer
Related
When importing external SVG images the Inkscape offers three options:
Include SVG image as editable object(s) in the current file
Embed the SVG file in a image tag (not editable in this document)
Link the SVG file in a image tag (not editable in this document)
At first, for convenience I imported an SVG images (Image A) into master SVG image B in the third way (Link the SVG file) so that when editing image A, master image B changes accordingly. However, later in the publishing process, I found that I needed to make sure every part in master image B had to be editable, including those parts within image A.
Had I imported image A in the first way above (include SVG image), this would be possible. I had made some transformations to the linked image A within master image B so I didn't want to do it again. Is there a way to transform a linked image (<image xlink:href="XXX.svg" />) to an included image (<svg>...</svg>) with just a few clicks while preserving all the transformations I did to this image?
Right-click on the image and select 'Embed image'. This is going to embed it as an image, <svg:image ...>, though, not as an svg (I think that would be invalid SVG code, too).
For multiple images, use the extension 'Extensions > Images > Embed Images' without any image selected (or with all of them).
I am trying to copy a SVG path from a SVG file to use in a PaperJS project.
Here is a Paper.JS Sketch of the SVG using new Path(svgPath)
Here is a JSFiddle of how it's supposed to look
Any idea why this is happening?
The pathData contains two subpaths (i.e. outside of character, inside hole). When dealing with multiple subpaths in PaperJS, I believe you need to use CompoundPath instead of Path. In your PaperJS example, change...
var path = new Path(pathData);
to...
var path = new CompoundPath(pathData);
I need to change the image programmatically that PathMenu uses to design.
I have a PaintCode generated StyleKit which draws .SVG files, not an image in a Asset.xcassets.
PathMenu uses something like this to take the images:
let menuItemImage = UIImage(named: "bg-menuitem")!
but I need to make something like
let menuItemImage = myImageFromMyStyleKit
How can I make this work?
In PaintCode document, select canvas and in Inspector, select StyleKit Image Method from dropdown menu in Code Export section.
This canvas will then generate imageOfCanvas... method, instead of drawCanvas... method. This way, you can then simply obtain image of this canvas and use it in the menu item.
PathMenuItem(image: StyleKit.imageOfCanvas)
Using bonsaijs, is there a way to export the stage (or entire svg) to a png file ?
I saw an option for importing a svg, but couldn't find an easy way to export it. Any leads on this would be appreciated ?
No, there isn't any API provided to export SVG to PNG.
Nevertheless you could either create your own exporter that draws the whole SVG context to a Canvas context and exports that as PNG or instead of storing a static image and losing all movie informations and interactivity you could possibly store the whole Bonsai-Script for that specific user.
I recently started working with Google Dart (www.dartlang.org) and playing with SVG.
I am trying to scale a generated SVG to fit into a <div> using a viewBox.
People on StackOverflow already gave me a lot of help.
I am now able to scale paths like this: Dart create and transform an SVG path
But is seems that viewBox is made for scale-to-fit and using it would save me from scaling all paths in the svg separately. That is why I want to use a viewBox.
I tried the following:
// get bounding box of the created svg
Rect bb = path.getBBox();
// create a viewBox for the svg to fit in the div
var viewBox = svg.viewBox.baseVal
..x = bb.x
..y = bb.y
..width = bb.width
..height = bb.height;
// center the image inside the div
svg.preserveAspectRatio.baseVal
..meetOrSlice = PreserveAspectRatio.SVG_MEETORSLICE_MEET
..align = PreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
But no scaling happens.
How would I solve this?
While writing this question and retrying to make sure I tried anything before asking here, I found the following solution.
It seems like Dartium (Chrome with a native Dart VM) has a bug (issue 12224) where changes to the viewBox are not reflected directly.
Adding the following code after changes to the viewBox forces Dartium to somehow resize to the requested size:
// add an empty ```<g>``` element to force svg resize
SvgElement g = new SvgElement.tag('g');
svg.append(g);