I try to use svg file as some element's background image. When I save image as SVG 1.0/1.1 in Adobe Illustrator, it displays correct in my app. If I save image as SVG Tiny 1.1/1.1+/1.2 it doesn't displays in app.
I use next css:
background-image: url(img.svg);
Does iOS support SVG Tiny? Or what I must to do, that my SVG Tiny image will display in app as background image?
Yes, iOS and pretty much any browser/device that supports SVG also supports SVG Tiny. However, SVG Tiny is a subset of SVG intended for devices with poor performance, it will discard gradients, opacity, embedded fonts and filters. What is probably happening is that the features you are using in your file are being discarded by the Tiny format. SVG Tiny does nothing to save on file size.
In summary, just use SVG 1.1.
Related
I am having an issue where the images are rendered with a strange glowing effect around them, pictured here:
It is tough to see from this close but is extremely noticeable when viewing the app. Also, taking these screenshots into a design program and using the color dropper will prove that there is a glow around these images. Each of these images are PDF files, rendered as a template image so that I can change the tintColor instead of adding more images to my assets folder for each color.
I have read some other articles and questions that says there isn't full support for vector graphics yet (here). However, that is outdated as it specifies iOS 7 as the latest version at the time of writing. Now in iOS 13, I assume there have been changes. Another article I read said to never use vector graphics as they can get messed up when Xcode generates PNGs from the PDFs (here).
Information about the assets in my Images.xcassets:
Render as: Template Image
Resizing: Preserve Vector Data
Scales: Single Scale
I also tried to implement 3 PNGs at different sizes (#1x, #2x, #3x) for each image but got the same effect.
Creating new images with a smaller border size got rid of the glow but obviously, that doesn't fit the design style style that I want in an app. I designed these Icons in Sketch and used a border size of 3, then exported as PDF.
So, as I was writing this question I seemed to have found an answer.
It turns out it had nothing to do with anything in Xcode. The problem lies with Sketch. I redesigned each element in Adobe Illustrator, exported them as PDFs, set the same settings in the assets folder like so:
Render as: Template Image
Resizing: Preserve Vector Data
Scales: Single Scale
Here are the updated screenshots:
I am using:
Sketch (Version 52.5)
Adobe Illustrator (Version 24.2.1)
I don't know why this is an issue, but I hope it can help someone who has this issue down the road. If anyone has any more information on this, please write a comment :).
I have been looking at SVGKit and I am finding conflicting ideas. Some say it's slower than PNG and others saying it is fast.
I was hoping to get a recommendation and which route I should take. When I am exporting my vector graphics to PNG for display, would it not make sense to use an SVG instead ?
Of course this gives the added value that it remains a vector.
Or is it still recommended in exporting everything to a PNG ?
You might consider the middle-way introduced in Xcode 7. Here you add your assets to the project as vector images (PDF) and at build-time Xcode automatically generates the PNGs in all needed sizes (1x, 2x, 3x).
Personally, I only use SVGs when necessary, like if I need to be able to change the color of the (parts of the) image. I believe there can be a performance hit when resizing vector images at run-time, although Android uses vectors as default, so it might be insignificant.
SVG is most resource intensive and can be used if you need to display something that can be zoomed in and out while PNG should be preferred for most UI graphics (logos, icons, etc.), as it is crisp yet remains lightweight and fast to display so there is no way to compare SVG with PNG in term of Performance.
if you are going after a Crystal clear images you can use pdf based graphics, which are supported by Xcode Using Vector Images in Xcode
if you still need to implement SVGKit i always suggest using some tools (like SVGCleaner) to clean and simplify SVG in order to enhance performance.
I'm trying to export a PDF with embedded transparent TIFF images. These images have extremely large dimensions. During the embed process, they are shrunk down to fit in the placeholder frames within the target InDesign file. Because of the dramatic decrease in size, when I then export a PDF from the InDesign file I get a halo affect from the anti-aliasing around the edges of the embedded images. I've had some luck reducing the size of the halo by telling InDesign to not down-sample, but I haven't been able to eliminate it. Does anyone know a way to get rid of this artifact?
I am working on an iOS7 version of an existing web app. Most of the icons used in the web app are defined in CSS:
background-image: url('data:image/svg+xml;charset=US-ASCII...
Previously, I have requested PNG copies of the relevant icons from the designer, but as the application grows, that is getting cumbersome. I am looking for one of two solutions:
A way to render the SVG as UI in iOS, instead of PNG based UIImages.
A tool (browser extension?) to automatically extract images (for a given screen size) as PNG or similar.
I have briefly tried Pixate, but I couldn't find any documentation for my particular use case, and ran in to several quirks.
I want to show EPS images inside IOS application, But we don't want to convert these in any other format.These are the vector images, and cannot be converted to raster images. I want to demonstrate the ability to ZOOM images without distortion.
So is there any way to do this, I am using HTML an Phonegap for developing the app.
Convert them to SVG. Vector graphics AND supported by HTML5/Webkit...
I would use InkScape. It's an open source application that is basically Adobe Illustrator light. Has many of the same functionality as AI but without the robust toolset.