Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this:
http://raphaeljs.com/icons/
Update: in recent versions of Photoshop, there is a built-in option to export the image as SVG, which works well on paths and custom shapes. Just do:
File -> Export -> Export as... and select SVG in the file settings.
Original Answer:
Starting from Photoshop CC 14.2, you can create SVG files directly from Photoshop:
Create a file named generator.json with the content below in your user home folder.
Restart Photoshop and open your PSD file.
Activate the generator: File > Generate > Image Assets.
Rename your layer to <something>.svg.
The svg file will be created in the assets directory next to your PSD file.
Content for generator.json:
{
"generator-assets": {
"svg-enabled": true
}
}
Source: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/
Select and copy the path in Photoshop
Launch Adobe Illustrator
Create a new Document
Paste
Save as SVG
If you have Illustrator and have not created all the paths, however, it is probably easier to create them directly in Illustrator.
If you do not have Illustrator, you are probably better off using the free Inkscape SVG editor to draw your paths.
If you do already have the paths in Photoshop, and do not have Illustrator, the best I can think of is to turn on the Info palette in Photoshop select the path points one at a time and manually record the positions of the point itself as well as its handles, and from those manually create the path using absolute curveto commands, 'C' (for the points with handles) and absolute lineto commands, 'L' for those points that have no handles.
Another option is to save the file as EPS in photoshop making sure to have export vectors checked, and then loading that into illustrator and saving as SVG
All answers were good, but for me they were too much, there is an online tool provided by Adobe:
http://adobe.com/go/extract_tryitnow_en
All you have to do is upload /drag & drop/ your .psd file, choose the path layer and download as svg. And you can extract the svg path, d attribute in particular.
Then what I did is put the path into a g element, then scaled g and translated the path
For custom shapes, you may want to have a look at the recently released open-source script called Convert Custom Shapes File to SVG Set (for Photoshop CS3 or later), used to convert a custom shapes file (.csh) or a custom shapes preferences file (CustomShapes.psp) into a set of SVG files.
Related
It seems it's possible to some extent to use SVG images in some controls, for instance SVG files can be only added as embedded resources when using some of the available NuGet packages out there. Also, at least for ToolbarItem the images need to be stored somewhere in the file system, so I had to create my own SVG rasterizer that saves those images to bitmaps in the cache directory, so those could be passed in a FileImageSource to the Icon property in the control ToolbarItem. For, the control Button those images need to be stored in the Resources or drawable directory, so it won't work with the rasterized bitmaps, since those are stored in the cache directory. With all those limitations when trying to use SVG files directly at runtime, I was thinking maybe I could convert all those images to the corresponding JPG or PNG images at build time using some task, but I'm not sure whether that conversion could be done with the current available tools. So, my questions is how to use convert directly SVG images for using in common controls in a Xamarin.Forms application (ToolbarItem, Button, etc)?
Below is the picture of what I'm seeing in scss file that define icons in our web app.
They must be pointing to some fonts we had purchased but the individual who handled this at the time did not map all the icons.
I'm trying to figure out how they're actually mapped. Are the hexadecimal looking numbers the coordinates of those icons in the file that contains them -- kind of like sprite images?
If so, how do I get those coordinates? Also, in the sample image I included, what file are they pointing to? I see a reference to a font-path at the top but not sure how to interpret it.
Below is the image showing what's in the fonts folder:
You can use Icomoon for generating font icons. Its really cool service and easy to use.
Also this was the refference I shared before: https://code.tutsplus.com/tutorials/quick-tip-ever-thought-about-using-font-face-for-icons--net-11233
Looks like you can close the topic?
Is it possible to use png files in QwtPlot? Normally i can use svg files in my plots with QwtPlotSvgitem class but i could not succeed with these png files. Please give me a clue about that.
Regards
Probably there are several ways to do this. You don't specify what kind of image you want to draw (and where).
You might create a QwtPlotMarker (Qwt docs) with a custom QwtSymbol (Qwt docs). You can try QwtSymbol::setPixmap(). A QPixmap can be created by calling its constructor with the file name of the *.png image (Qt docs).
I made a drawing in Illustrator and exported it as FXG file to be used in my Flex App which is working fine. But now I want to change some settings inside FXG programatically, namely changing color inside the FXG file. How do I do that?
If you are using a .fxg file you won't be able access anything inside of the file since the compiler optimizes it. You can almost think of it as an image file that can scale. Sounds like you might want to be using MXML Graphics, see this post for an explanation of the difference: http://help.adobe.com/en_US/flex/using/WS145DAB0B-A958-423f-8A01-12B679BA0CC7.html
I need to create flash content dynamically- towards that need to build images. I need help on two points
a) are vector graphics always better than raster graphics on size/ do vector graphics take longer to render
b) do we have open-source tools to create fxg files to import into flex builder
rg
for your b) point: just use Inkscape SVG editor.
It will allows you to convert svg to fxg starting version 0.49 thanks to the svg2fxg plug-in.
In the mean time (version 0.48) you can install the svg2fxg plug-in manually:
Install Inkscape http://inkscape.org/download/
Get the 2 svg2fxg plug-in files from here:
http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/svg2fxg.inx
http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/svg2fxg.xsl
and copy them in Inkscape extension folder (C:\Program Files (x86)\Inkscape\share\extensions on Windows 7)
You can now start Inkscape and will get a new "File -> Save As -> Flash XML graphics (*.svg)" entry.
I successfully tested it and used the fxg generated assets in on IPhone: it works fine :-)
WRT b)
I don't know an OpenSource tool, however FXG is not hard to create by hand. Just look at the button skin for example and copy the FXG definitions and play around. FXG is pretty intuitive.
Found this handy FXG editor, the only one that ive found so far:
http://fxgeditor.7jigen.net/edit/id/309
Also downloadable as an AIR app:
http://labs.7jigen.net/2010/05/15/fxg-editor-air-app/
Another solution - use a good SVG editor such as SVG Edit or yEd, then convert SVG to FXG using S2F Converter.