Comments (6)
Hi, currently only PNG and we used to support SVG. The reason it was dropped is because the quality of rendering SVG and vector graphics in general changes drastically from tool to tool.
In other words if the SVG was produced in Illustrator, then Illustrator would probably render the raster version in the most accurate way.
From our testing from all of the tools that can render SVGs, browsers render it the most accurately (rsvg, imagemagick does a horrible job) but still we found browsers to not support all of the features Illustrator may use.
I suggest the next steps can be -
- Try to get PNG as part of the deliverables from your designer
OR - If you can't, then, try to share a sample of the SVG you want to work with and I can tell you how accurate would be a render of it (that is not done with Illustrator/sketch - I'm assuming your artist uses those to make SVG). If we get a feeling that most sources will be as compatible, then we can think of re-establishing SVG support.
from blade.
Thanks for your quick response.
Unfortunately I can't share the exact files, but I asked our artist how they are created - here are simple sample SVG and PDF files in the style of how they would appear in our app. We currently receive our files in both SVG and PDF as part of our contract, and we've used the PDF files until now (because Xcode supports simply dragging & dropping them into an asset catalog).
I also played around a bit with different tools to try and convert the files like you said, and found quite a few problems (e.g. imagemagick just produced a black circle on the above SVG sample file). One tool I tried that works reasonably well is svgexport but it also had issues with the viewport.
Maybe if there are so many problems with SVG, PDF could be supported instead? I tried the simplest possible example using imagemagick on my sample images, convert p1.pdf p1.png
, and that worked flawlessly. At least from my experience, a few developers started switching to vector graphics after the 6 Plus was introduced, because now you have to handle @1x
, @2x
and @3x
.
from blade.
Yep, your experience with SVG is exactly where we stood a year ago, unfortunately :(
I think using PDF - if it renders as perfectly as you say, completely makes sense - thanks for the research!
I'll do a few spikes today to see which engine works best for this, I'll start with imagemagick/graphicsmagick as you've recommended.
from blade.
I think for PDF support converting the images wouldn't even be needed most of the time. I just looked in one of our project's asset catalog and all the image sets except for the App icon are using the PDF directly, with Contents.json
files like this:
{
"images" : [
{
"idiom" : "universal",
"filename" : "Header bottom.pdf"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
from blade.
So I just double checked this, and looks like you're right. This behavior is both nice and strange, I'm wondering why would I need 3 different sizes, for example, given I supply a vector (non-raster) art with PDF.
I'm not sure Blade has any additional value here, what do you think?
Some more interesting findings from my googling around:
https://bjango.com/articles/idontusepdfs/
http://martiancraft.com/blog/2014/09/vector-images-xcode6/
and this is nice, regardless: http://krakendev.io/blog/4-xcode-asset-catalog-secrets-you-need-to-know
To summarize, from these, looks like Xcode does scaling up from 1x PDF render version, and that scaling up may result in artifacts in gradients. More over, the rendering engine is Quartz, which may or may not be rendering differently than the software that the designer used.
All in all, this was a nice surprise to learn, thanks!. Personally, the disadvantages present a surprise factor (because you're only exposed to the differences after running the app) I don't want to have, so I'll stay away from PDF.
from blade.
Yeah, using blade could be overkill for this. However, some projects might still benefit from it e.g. if you have assets coming from different artists, where some might not be using vector graphics but others are. A unified pipeline would be nice there, even if it means that blade would just be putting the PDF files into the correct folder.
Also, I believe the launch images and the app icon still need to be available as PNG in all the correct sizes, etc. Blade could support automatically converting these files if the source is PDF.
from blade.
Related Issues (11)
- it's Xcode HOT 2
- Does Blade maintain directory structure in the xcassets folder? HOT 1
- @2x or @3x HOT 22
- Manage existing image files HOT 5
- Incremental builds HOT 2
- Support iMessage Extension & Sticker Pack icons HOT 2
- blade fatal error: fault [signal 0xb addr=0xf3201307c33 pc=0x13f732] HOT 6
- iPhone and iPad Notification have not automatically generated
- Blade vNext HOT 6
- Add support for custom output size
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blade.