how to export without drop shadow in sketch - sketch-3

I am new to sketch. After designed an icon in sketch, I want to export it to PNG. The icon is drawn with multiple path and grouped together. But when I export it, the exported image has drop shadow in it. I don't want the shadow. Is there anyway to get rid of it?

You can try icongroup Layer>Flatten Selection to Bitmap. And then Make Exportable.

Related

Why is my icon not centered in the svg preview?

I try to make custom icons for an app. I use Illustrator to create compound paths. Therefore I use FontAwesome-Pro.5.13.0 icons. When I export my custom icons in SVG format they seem to have a different padding (see the picture below). Left is the exported icon which has the same compound path as the right one. The only difference is that I exported the FontAwesome to svg.
Anyone got an idea what's happening?

Why does Adobe Illustrator rasterize drop shadows instead of using <feDropShadow> filter when exporting SVG?

If I export a shape with drop shadow as SVG, the drop shadow get's rasterized. Why?
The <feDropShadow> filter works great! I don't want ugly rasters in my clean sharp SVGs. Rasters are evil. :(
Even when importing (e.g. this SVG) Illustrator ignores the filters.
Is there a way to force Illustrator to use a filter for the shadow without drawing the shadow by myself?
There is a way
All you need to do, is use svg-filters specifically when you want to work with svg.
Click Add New Effect/SVG Filters/Apply SVG Filter
Then you can select shadow presets (or use a gaussian blur to create the shadow yourself), then click on the fx button, then you can edit the actual code the svg will make and finally click on update preview to see the changes you have made.
I don't know why adobe doesn't create a UI for this method, but you can just change the properties yourself to get the desired look you need.
I am unable to answer your question directly, however, I can suggest a solution -- use Inkscape (it's free).
Apparently, Illustrator does not fully support SVG filters.
With Inkscape, all you have to do to add a drop shadow once you open your SVG file is to select the object that you want to add a drop shadow to and then in the top bar you've got Filters -> Shadows and Glows -> Drop Shadow.
Hope it's helpful.

Changing only some path/group fills in a background image using svg-sprites

I'm using svg as a background image (logo) in a WP menu plugin and i want it to change a color (fill) when hovered. As it's a free version of the plugin i can't use image, object etc - i have to use my svg as a background image. I've to support IE (9+) so masks/filters are out of question and i'm pretty much left with svg-sprites. That's okey, i know how to do it (using use/xlink:href).
But now comes a tricky part. I want my svg to change only fills of some groups/paths while hovered leaving others untouched. I can only change colors of all paths/groups together in a background image with svg-sprites afaik. Is there a way to do it? Thank you in advance!

Fabric.js How to resize IText horizontally without stretching the text

I have this IText object within a parent Group object.
When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull.
Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group.
How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work.
try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox.
This new class has the properties you are looking for, the controls normally used for scaling are instead used for resizing the element and the text flows inside it.
I was not able to make the latest fabric.Textbox work exactly like I wanted.
Luckily, I found a way of making the fabric.ITextcenter horizontally when the parent fabric.Group is resized horizontally and also make the same fabric.IText Text grow in size based on the vertical resize. No ugly text stretch.
Here is the solution:
https://jsfiddle.net/t44wyday/46/

Highstock export .png to variable

I would like to know if there is a way use the built in export/getSVG function in Highstock to save the exported PNG to a variable in the background instead of prompting the user to download the file.
The thought is for a user to be able to click a button which will export each snapshot to a variable in the background. When done scrolling through the entire chart a subsequent button would create a document containing all the PNG images for a singe download. We can develop everything but the hangup is on saving the PNG image to a variable. We have been able to assign the SVG string to an array we maintain but due to size this would not be the best option for use.
Are there any ways to do this?
Something like this is possible to achieve, see FAQ
However, there is also one more option - get SVG, and use canvg to render into canvas and then to PNG file, as you need.

Resources