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);
Related
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
For my web app, I am creating SVG elements in Illustrator and then using them in a library of elements that users can add to the fabric canvas.
Some elements are simple but some complex with multiple compound paths etc.
I have came across an unusual issue where if I create a path with a gradient fill, and then copy that path, save the SVG and add it onto the canvas, only the first path would have the gradient and the rest would be flat colors.
Here is a screenshot of what I mean...
After experimenting and trying different things, I finally discovered that this is happening because the paths have the exact same gradient properties.
So if the gradient slider (color stops, opacity, location etc.) of two or more paths have the exact same properties in Illustrator, then the issue occurs.
So the workaround is to alter something like the location (for example) to be 99.9% instead of 100% on the copied path, then the issue goes away. However, this will quickly become a tedious and annoying way to fix this. Basically, each path with a gradient, needs to have a unique gradient set up and cannot be identical to another paths gradient properties.
Here are more screenshots to better explain...
After making this change...
The first and second path's gradient's location are different.
The first, third, fourth and fifth paths have exact same gradient.
This is what it looks like when I add it to the canvas now...
Here is the code I am using to add the SVG to the canvas...
fabric.loadSVGFromURL(image, function(objects, options) {
var oImg = fabric.util.groupSVGElements(objects, options);
oImg.perPixelTargetFind = true;
oImg.targetFindTolerance = 4;
canvas.add(oImg);
canvas.renderAll();
});
Can anyone tell me why this is happening and if there is a way to fix this with code rather than Illustrator? I have hundreds of elements to create that will have many paths with the same gradients. I know it will be a real pain to have to worry about paths not having the exact same gradient.
http://jsfiddle.net/oc70xjsq/
Link to the SVG
So I'd like to use githubs octicons in Elm as svg nodes. Although I'm not sure that this is a good idea but I figured here is one way I could do it:
I could do pass the svg tags as string with flags to an Elm app calling:
const octicons = require('octicons');
const plusIcon = octicons.plus.toSVG();
And then just put that as a flag. But then how can I parse that string as an svg node?
I couldn't find any way to do that.
Although I don't really need to have it as an svg node. I just need the tag in my view to use that icon. So any solution to show those octicon icons would suffice. I just thought it would neat to have those as svg nodes in Elm.
In any case, maybe there is a better/easier way to use octicons in Elm?
Any ideas would be much appreciated.
I think instead of returning an svg string you could return an object with all necessary attributes. In opticons you have options and path. In case of path you can either parse the tag yourself or get something like jQuery.attr do it for you. After that from inside elm elm-lang/svg has all the utility: Svg.svg with Svg.path inside.
Given a D3js script, with interactive functionalities a lot like what I want, using a topojson to generate its SVG.
Given I, on my side, don't have topojson but a SVG file, on which I wish to reuse the same interactive functionalities.
How should I process so my D3js code load my SVG file rather than generate one from a topojson ?
I will of course provide a strictly coded SVG file, with suitable ids and syntaxe.
Idea: I guess I should replace the
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
// further SVG generator code here
});
which generate the SVG code by something to load and place my SVG file, but how to process ? what code to use ?
You can include the SVG file directly in your HTML, no need to load it in Javascript. For example:
<object id="mySVG" data="my.svg" type="image/svg+xml"></object>
The only thing to keep in mind with this is that you end up with two DOMs in your document (the main HTML one and the embedded SVG one) and CSS selectors don't cross DOM boundaries. That is, d3.select("#IDinSVG") probably won't work, but something like d3.select(d3.select("#mySVG").node().getDocumentElement()).select("#IDinSVG") should.
I'm looking for an app or a script (web service) that can clean up SVG files, by that I mean removing possible copious data such as metadata. When creating the SVG file I've used standard settings in Adobe Illustrator. Upon export the paths look like this -
M 678.567,252.999 c-0.546-1.307-3.898-3.118-5.005-4.007c-1.596-1.276-1.42-3.375-3.09-4.381c-4.297-2.571-9.604-3.125-13.746-5.916
While I need them be cleaned up and reordered in way like this -
M 600.375,693.40625 598.75,695.03125 596.125,694.34375 594.57422,700.50391 592.25,700.16406 591.875,702.59375 593.875,705.53125 592.75,706.40625 593.9375,710.53125 592.75,710.65625 590.3125,712.90625 589,711.96875 587.1875,712.90625 586.8125,711.40625 584.125,710.53125 581.9375,711.03125
Fairly new to working with SVG. What I need these paths for is drawing up a map with Raphael JS and it seems only to take the paths in that particular way.
I tried Scour (http://www.codedread.com/scour/) but with no success unfortunately (the web service isn't working and there were problems running the procedure with Terminal).
To me it looks like Raphaël should support all of the path syntax in SVG 1.1.
Anyway, ReadySetRaphael.com is a site that provides conversion of a subset of SVG to Raphaël code.
Convert .ttf (or other format) to .svg: https://everythingfonts.com/ttf-to-svg .
Convert the svg. to icons separated icomoon.io/app/#/select,
-Import icons'
-Select the icons that you want export
-Click en 'Generate SVG, PNG, PDF'