Email or username:

Password:

Forgot your password?
Darius Kazemi

EDIT: Okay so! I made a claim that Figma embedded a PNG in an SVG and it is possible that what happened was a designer put a raster image into figma and then the engineer who exported this assumed it was built from individual elements. It looks like if you group non-raster elements and export SVG it will give you a zip with a single, non-exploded-into-individual-layers SVG file.

My mistake, once again bitten by people not using Figma how Figma wants you to use it

41 comments
Andrew

@darius I found this out a couple of weeks ago, I was so cross. Just don't offer it if you can't do it!

Pauxlll Kruczynski

@darius I ❤️ design software in *checks calendar* 2023

taylor, pipe

@darius love 2 have design software that does malicious compliance

Rey :ghosthug:

@darius oh NO! that's... that's not what ANYONE means by that!! o.O

Darius Kazemi

allow me to recommend a piece of software that I am very happy paying $10/year for: Boxy SVG

It is the answer to the age old question: what if visually editing SVGs was intuitive and produced absolutely no junk markup

boxy-svg.com/

(I have no affiliation, this is not me selling something, I just like the software, it's free for most of what you want to do but $10/year for "pro" features)

[DATA EXPUNGED]
Darius Kazemi

@darth_mall although I highly recommend the web app!

[DATA EXPUNGED]
[DATA EXPUNGED]
Darius Kazemi

@darth_mall yeah I need it for work so. also gets used for Boxy

Schalk Neethling 🇺🇦

@darius @darth_mall While I wonder why the app does not work in Firefox 🤔 the larger question is, why does the support forum, only work in Chromium.

It would be good to understand that and file a compact bug on webcompat.com

Darius Kazemi

@schalkneethling @darth_mall the developer (I believe it is maintained by a single person) says "As of 2022-04 Firefox has less than 4% of the browser market share and therefore supporting it is not worth the effort."

Thread here, along with pushback on that number (only viewable on chrome lol): boxy-svg.com/questions/376/fir

It seems like they just don't want to support more than one rendering engine

[DATA EXPUNGED]
Darius Kazemi

@darth_mall @schalkneethling this developer writes everything from scratch including their forum software. it's one of the reasons Boxy is so performant -- no framework bloat. they ended up writing their forum software inside Boxy itself, probably because as a bit of an "outsider" developer it is easier for them to maintain. frankly I don't blame them for that.

Schalk Neethling 🇺🇦

@darius @darth_mall 😞 That is so unfortunate and not good for the web ecosystem. Thanks for the additional info, Darius.

Brian Gawalt

@darius I have an open ended commitment to make some tshirts for my trivia team! Can boxy help me draw the art for the shirts?

Darius Kazemi

@bgawalt I think it is a good candidate for the job

Brian Gawalt

@darius excellent, my plan as of eight minutes ago was "inkscape(?)"

I have a post-it note doodle I plan to photograph and trace over

Ivan Sagalaev :flag_wbw:

@darius if only it were actually a Web app instead of a Chrome app…

Ivan Sagalaev :flag_wbw:

@darius I mean, I'm not telling them what to do. And I've been seeing those arguments for too long now to care. I'm just sad about losing the actual meaning of "the Web" in every such case.

Alex Crocker

@darius there’s no way this is true… usually I don’t export though. I right click on a group and choose Copy as SVG from the context menu and it’s an actual svg

Darius Kazemi

@croc I don't have that option.. only "copy as CSS"?

Alex Crocker

@darius I’ll have to check again when I get home later. Maybe they moved things around.

Gabriel N

@darius This tip takes some work but produces good results and small SVGs. forum.figma.com/t/awesome-tip-

I believe it should be possible to switch the png embedded with a wepp, wich is even smaller, but haven't done the test yet.

I have also build animations using rasters within an SVG done with this method.

Darius Kazemi

I will fav any and all "figma balls" jokes

Niels van Rongen

@darius that explains why at work I recently had to replace an “SVG” with a PNG embedded inside of it. 🤔

clar fon

@darius this is like how imagemagick will gladly convert any image for you to SVG by embedding it directly into an SVG canvas

Darius Kazemi

@clarfonthey I mean it's one thing if you are trying to make a bitmap into svg... in figma's case you at least have enough information to create a real vector representation!

Woozle Hypertwin

@darius The phrase "customer lock-in" comes to mind...

qdot

@darius Figma export in general is just an absolute shitshow. I was looking to automate a UX dev pipeline last week and it really does seem my options are "rebuild manually on output platform" or "spend as much time fixing up exports as it would take to rebuild manually"

doctor garbage expert

@darius what the heck, i've never had this happen over...years? is the selection you're trying to export all vector?

Darius Kazemi

@whoisgina sooo I think a designer dropped a raster image of a basic shape into figma instead of actually building it. that was how we ended up with a huge image instead of ~50 characters of SVG. edited the original post

doctor garbage expert

@darius ohhh okay okay gotcha! yeah ligma can't vectorize some raster thing, but the right move in this case (for all figma engineers reading this!!!) is a prompt to say "heads up, something in your selection is raster, you're gonna get a fucked up SVG!" or just "no sorry, can't, $LAYER is raster" instead of just silently doing something extremely bizarre

Darius Kazemi

@whoisgina yeah the warning would be super helpful

Go Up