Giter VIP home page Giter VIP logo

Comments (6)

jondot avatar jondot commented on July 16, 2024

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 -

  1. Try to get PNG as part of the deliverables from your designer
    OR
  2. 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.

milch avatar milch commented on July 16, 2024

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.

jondot avatar jondot commented on July 16, 2024

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.

milch avatar milch commented on July 16, 2024

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.

jondot avatar jondot commented on July 16, 2024

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.

milch avatar milch commented on July 16, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.