133被浏览12,132分享邀请回答zhuanlan.zhihu.com/akirachang/），只支持一些较简单的 SVG 滤镜，比如 feGaussianBlur 高斯模糊滤镜。像一些较为复杂的滤镜，比如 feDiffuseLighting，可能会显示有误：如图，上面一排是预期效果（预渲染），下面一排是 SVG 滤镜实时渲染效果。可以看到，渲染出来的效果与预期效果有很大的偏差。另外，还有 EPS 格式的矢量图。iOS 似乎不支持这种格式，不过可以通过一些开源的库将其解析为 Core Graphics 能够理解的东西。还有就是 Adobe Illustrator 原生的 AI 格式。iOS
系统似乎也不可以通过 Quick Look 直接查看。不过 Dropbox 实现了 AI 文件的预览，渲染应该是在服务器端实现的。差不多就这些了。8312 条评论分享收藏感谢收起How to render SVG images in iphone without uiwebview? - Stack Overflow
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I want to render SVG images in iPhone without using a UIWebView. How can I do that?
I have checked these 2 links:
The above project on Github shows 102 errors showing UIKit framework missing and others and I are also not able to add that framework.
I think the application is for MacOS not for iOS.
The project on the above url shows the error when i build the project.
Target specifies product type 'com.apple.product-type.framework', but there's no such product type for the 'iPhoneOS' platform.
Does anyone know how to solve that? Or other useful working examples that I can use for that? I want to render SVG's on iPhone.
UPDATE: I have got working SVGKit working by reading instructions. But when I tried to make project working which iI downloaded from Github (
) I got following errors:
1) UIKit/UIKit.h: No such file or directory (I am not able to add it using add existing framework)
2) Libxml/tree.h: No such file or directory
3) Expected specifier-qualifier-listbefore 'xmlParserCtxtPtr'.
Does anyone know that how to resolve it and make it work?
Jason Morrissey, author of the extremely excellent Alien Blue app, the best iOS Reddit client on the store (can you tell I'm a fan? I'm also a beta tester.) recently put up his
framework, which renders SVG images as Core Animation layers. I haven't used it, but I know it exists.
And then, look... If you're just getting lots of errors when you bring in other people's classes, my strong suspicion is that you're not following their "how to use" instructions. They'll mostly tell you what frameworks are required and what platforms they support. Every time I've tried to use something like this and had a compilation bloodbath, I've gone back and found some installation instruction step I missed.
45.2k21111175
19.2k55585
I just managed to compile SVGFlashRenderer.
For iOS you need to open the project from the directory SVGRendererTouch.
And don't forget to separately download contents of the lib/MROGeometry dir from github (just follow the link in the source tree).
P.S. For me, the best working solution was SVGKit, but not the version from Jason Morissey (mentioned in another answer), but a . It has many bugs fixed and works in a much more correct way.
It's easy.
SVGKImage *svgImg = [SVGKImage imageNamed:@"add-control-panel"];
SVGKFastImageView *imgView = [[SVGKFastImageView alloc] initWithFrame:CGRectMake(10, 100, 420, 280)];
imgView.image = svgI
[self.view addSubview:imgView];
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabledMaterial Icons Guide - Google Design
An overview of material icons—where to get them and how to integrate them with your projects.
What are material icons?
Material design system icons are simple, modern, friendly, and sometimes
quirky. Each icon is created using our design guidelines to depict in simple
and minimal forms the universal concepts used commonly throughout a UI.
Ensuring readability and clarity at both large and small sizes, these icons
have been optimized for beautiful display on all common platforms and display
resolutions.
See the full set of material design icons in the .
Getting icons
The icons are available in several formats and are suitable for different types
of projects and platforms, for developers in their apps, and for designers in
their mockups or prototypes.
We have made these icons available for you to incorporate them into your
products under the . Feel free to remix and re-share these icons and documentation in your
We'd love attribution in your app's about screen, but it's not required. The only thing we ask is that you not re-sell
the icons themselves.
Browsing and downloading individual icons
The complete set of material icons are available on the . The icons are available for download in SVG or PNGs, formats that are
suitable for web, Android, and iOS projects or for inclusion in any designer
Downloading everything
(~60MB) of all icons or the
Git Repository
The material icons are available from the
which contains the complete set of icons including all the various formats we
are making available.
$ git clone http://github.com/google/material-design-icons/
Installing icons from bower
Install the icons using the
package manager.
$ bower install material-design-icons
Installing icons from npm
Install the icons using
package manager.
$ npm install material-design-icons
Icon font for the web
The material icon font is the easiest way to incorporate material icons with
web projects. We have packaged all the material icons into a single font that
takes advantage of the typographic rendering capabilities of modern browsers so
that web developers can easily incorporate these icons with only a few lines of
Using the font is not only the most convenient method, but it is efficient and
looks great:
900+ icons all from a single, small file.
Served from Google Web Font servers or can be self hosted.
Supported by all modern web browsers.
Colored, sized and positioned entirely with CSS.
Vector-based: Looks great at any scale, retina displays, low-dpi display
The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format.
By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but this
can be reduced considerably by compiling only the icons you need into a single SVG file with symbol
Setup Method 1. Using via Google Web Fonts
The easiest way to set up icon fonts for use in any web page is through . All you need to do is include a single line of HTML:
&link href=&https://fonts.googleapis.com/icon?family=Material+Icons&
rel=&stylesheet&&
Similar to other Google Web Fonts, the correct CSS will be served to activate the
'Material Icons' font specific to the browser.
An additional CSS class will be declared called .material-icons.
Any element that uses this class will have the correct CSS to render these icons from the web font.
Setup Method 2. Self hosting
For those looking to self host the web font, some additional setup is necessary.
in a location, for example https://example.com/material-icons.woff and add the
following CSS rule:
@font-face {
font-family: 'Material Icons';
font-style:
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
In addition, the CSS rules for rendering the icon will need to be declared to
render the font properly. These rules are normally served as part of the Google
Web Font stylesheet, but will need to be included manually in your projects when
self-hosting the font:
.material-icons {
font-family: 'Material Icons';
font-weight:
font-style:
font-size: 24
/* Preferred icon size */
display: inline-
line-height: 1;
text-transform:
letter-spacing:
word-wrap:
white-space:
direction:
/* Support for all WebKit browsers. */
-webkit-font-smoothing:
/* Support for Safari and Chrome. */
text-rendering: optimizeL
/* Support for Firefox. */
-moz-osx-font-smoothing:
/* Support for IE. */
font-feature-settings: 'liga';
Using the icons in HTML
It’s easy to incorporate icons into your web page. Here’s a small example:
class=&material-icons&&face&/i&
This example uses a typographic feature called
, which allows
rendering of an icon glyph simply by using its textual name. The replacement is
done automatically by the web browser and provides more readable code than the
equivalent numeric character reference.
This feature is supported in most modern browsers on both desktop and mobile
Version supporting ligatures
Google Chrome
Mozilla Firefox
Apple Safari
Microsoft IE
Apple MobileSafari
Android Browser
For browsers that do not support ligatures,
fall back to specifying the icons
using numeric character references like the example below:
class=&material-icons&&&/i&
Find both the icon names and codepoints on the
by selecting any icon and opening the icon font panel. A
is also available on our git repository which shows the complete set of names
and character codes.
Styling icons in material design
These icons were designed to follow the
and they look best when using the recommended icon sizes and colors. The styles below make it easy to apply our recommended sizes, colors, and activity states.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18 }
.material-icons.md-24 { font-size: 24 }
.material-icons.md-36 { font-size: 36 }
.material-icons.md-48 { font-size: 48 }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Although the icons in the font can be scaled to any size, in accordance with , we recommend them to be shown in either 18, 24, 36 or 48px. The default being
CSS rules for the standard material design sizing guidelines:
.material-icons.md-18 { font-size: 18 }
.material-icons.md-24 { font-size: 24 }
.material-icons.md-36 { font-size: 36 }
.material-icons.md-48 { font-size: 48 }
Material icons look best at 24px, but if an icon needs to be displayed in an
alternative size, using the above CSS rules can help:
&i class=&material-icons
md-18&&face&/i&
&i class=&material-icons
md-24&&face&/i&
&i class=&material-icons
md-36&&face&/i&
&i class=&material-icons
md-48&&face&/i&
Using the icon font allows for easy styling of an icon in any color.
In accordance with , for active icons we recommend using either black at 54% opacity or white at
100% opacity when displaying these on light or dark backgrounds, respectively.
If an icon is disabled or inactive, using black at 26% or white at 30% for
light and dark backgrounds, respectively.
Here are some examples, using the material CSS styles described above:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Example for drawing an icon on a light background with a dark foreground color:
faceNormal
&i class=&material-icons
md-dark&&face&/i&
faceDisabled
&i class=&material-icons
md-dark md-inactive&&face&/i&
Example for drawing an icon on a dark background with a light foreground color:
faceNormal
&i class=&material-icons
md-light&&face&/i&
faceDisabled
&i class=&material-icons
md-light md-inactive&&face&/i&
To set a custom icon color, define a CSS rule specifying the desired color for
.material-icons.orange600 { color: #FB8C00; }
and then use the class when referring to the icon:
faceNormal
&i class=&material-icons
orange600&&face&/i&
Icon images for the web
Material icons are also available as regular images, both in PNG and SVG
The material icons are provided as SVGs that are suitable for web projects.
Individual icons are downloadable from the . The SVGs are also available from the material design icons
under the path:
material-design-icons/*/svg/production/
For example, icons for maps are in :
material-design-icons/maps/svg/production/
If multiple icons are in use on a web site, creating spritesheets out of the
images is recommended. For more information, refer to the documentation in the .
PNG is the most traditional way to display icons on the web. Our downloads from
provide both single and double densities for each icon. They are referred to
as 1x_web and 2x_web respectively in the download. Icons are also available in the git repository
material-design-icons/*/1x_web/
material-design-icons/*/2x_web/
If multiple icons are in use on a web site, creating spritesheets out of the
images is recommended. For more information, refer to recommendations in the .
Icons for Android
PNGs suitable for Android are available from the . These come in all the supported screen densities so they should look good on
any device.
The icons are also available in the
in the same combination of colors and sizes named as follows:
*/drawable-{{density}}/ic_{{name}}_{{color}}_{{size}}dp.png
A density-independent VectorDrawable is provided which is supported from
Android Lollipop and later:
*/drawable-anydpi-v21/ic_{{name}}_black_24dp.xml
The Vector Drawable is currently only available as a black 24dp icon. This is
for compatibility with our most standard icon size. To render the icon in a
different color, use .
When using the Vector Drawable, it may not be necessary to include the xxxhdpi
density PNG since it is unlikely a device supporting that screen density does
not support Vector Drawables.
Icons for iOS
Material icons also work well within iOS apps. In both the
and , these icons are packaged up in
which will work easily with
(xcassets). These imagesets can be added to any Xcode Asset Catalogs by
dragging them into Xcode on to the asset catalog or by copying the folder into
the xcasset folder.
The imageset contains the single, double and triple density images (1x, 2x, 3x)
so they work on all known iOS screen densities. Both black and white icons are
provided, but we recommend using
which will allow the image to be used as an alpha mask that can be tinted to
any possible color.
Objective-C example:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@&ic_close&]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Swift Example:
let button = UIButton()
let closeImage = UIImage(named:&ic_close&)?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Icons in RTL
Languages such as Arabic and Hebrew are read from right-to-left (RTL). For RTL languages, UIs should be mirrored to display most elements in RTL. When a user interface is mirrored for RTL, some of the icons should also be mirrored.
When text, layout, and iconography are mirrored to support right-to-left UIs, anything that relates to time should be depicted as moving from right to left. For example, forward points to the left, and backwards points to the right.
However, be mindful that the context in which the icon is placed also influences whether an icon should be mirrored or not.
Icons should only be mirrored if their direction matches other UI elements in RTL mode. When an icon represents visual features of your website that are different in RTL, then the icon should also be mirrored in RTL. For example, if the numbers in a numbered list are on the right side in the RTL language, then the numbers should be on the right side of the mirrored icon.
Note: Icons that include a question mark need to be mirrored in Arabic and Farsi, but not in Hebrew.
For an in-depth guidance on this topic, please read the .
RTL icons on Android
describes in-depth how to implement RTL user interfaces. By default on Android, icons are not mirrored when the layout direction is mirrored. You need to specifically mirror the appropriate icons when needed, either by providing specialized assets for RTL languages, or using framework functionality to mirror the assets.
To provide specialized assets for RTL languages, you can use the ldrtl qualifier on resource directories, such as res/drawable-ldrtl/. Resources inside such directories will only be used for RTL languages. For devices running Android API 19 or newer, the framework also provides the
for Drawables. When this attribute is set to true, the drawable will be automatically mirrored on RTL languages.
Using autoMirrored:
&vector xmlns:android=&http://schemas.android.com/apk/res/android&
android:width=&24dp&
android:height=&24dp&
android:viewportWidth=&24.0&
android:viewportHeight=&24.0&
android:tint=&?attr/colorControlNormal&
android:autoMirrored=&true&&
android:fillColor=&@android:color/white&
android:pathData=&M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z&/&
If using autoMirrored or providing alternate Drawable resources isn’t an option, the ImageView scaleX attribute can also be used to mirror drawables (for instance, by providing a RTL-specific layout in a res/layout-ldrtl directory).
Mirroring within the layout file:
&ImageView
android:id=&@+id/my_icon&
android:layout_width=&60dp&
android:layout_height=&60dp&
android:scaleX=&-1& /&
Lastly, drawables can be mirrored programmatically.
Manually check for layout direction using :
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
Mirroring ImageView contents programmatically:
imageView.setScaleX(-1);
RTL icons on iOS
iOS has the concept of a
that is attached to each view. This can be unspecified, forceLeftToRight, forceRightToLeft, playback or spatial. iOS uses this value and the (left-to-right (LTR)/RTL setting of the device presenting the interface to determine the effectiveLayoutDirection of the view. This effectiveLayoutDirection determines whether or not to mirror an image when it is displayed.
By default, images' semantic content is set to unspecified.
This causes them to be mirrored in RTL mode. If you do not want an icon to ever be mirrored, you need to explicitly set it to be forceLeftToRight. Apple calls out some exceptions that should not be mirrored, such as media playback (Fast Forward, rewind, etc.), musical notes, images indicating the passage of time, etc.
Objective-C example:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@&my_icon.png&];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToR
Swift example:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: &my_icon.png&)
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToR
For more in-depth documentation on how to implement RTL on iOS and macOS, please review .
Semantic content was added in iOS 9. If you are supporting earlier versions of iOS, the
backports some of the functionality to iOS 8.
RTL icons on the web
We recommend the following article as a primer to RTL on the web:
By default on the web, icons are not mirrored when the layout direction is mirrored.
You need to specifically mirror the appropriate icons when needed.
The example below shows how to implement a simple RTL CSS rule. You can also .
&html dir=&rtl&&
&img class=&icon& src=&my_icon.png& alt=&my icon&/&
html[dir=&rtl&] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: &FlipH&;
Generate your own RTL icons using ImageMagick
If mirroring the icons in code is not an option you can use
to horizontally mirror the image.
convert -flop my_icon.png my_icon_rtl.png
Which icons should be mirrored for RTL?
Here is a list of icons that can be programmatically mirrored to RTL:
arrow_back arrow backarrow_back_ios arrow back iosarrow_forward arrow forward
arrow_forward_ios arrow forward iosarrow_left arrow leftarrow_right arrow right
assignment assignmentassignment_return assignment returnbackspace backspace
battery_unknown battery unknowncall_made call madecall_merge call merge
call_missed call missedcall_missed_outgoing call missed outgoingcall_received call received
call_split call splitchevron_left chevron leftchevron_right chevron right
chrome_reader_mode chrome reader modedevice_unknown device unknowndvr dvr
event_note event notefeatured_play_list featured play listfeatured_video featured video
first_page first pageflight_land flight landflight_takeoff flight takeoff
format_indent_decrease format indent decreaseformat_indent_increase format indent increaseformat_list_bulleted format list bulleted
forward forwardfunctions functionshelp help
help_outline help outlineinput inputkeyboard_backspace keyboard backspace
keyboard_tab keyboard tablabel labellabel_important label important
label_outline label outlinelast_page last pagelaunch launch
list listlive_help live helpmobile_screen_share mobile screen share
multiline_chart multiline chartnavigate_before navigate beforenavigate_next navigate next
next_week next weeknote noteopen_in_new open in new
playlist_add playlist addqueue_music queue musicredo redo
reply replyreply_all reply allscreen_share screen share
send sendshort_text short textshow_chart show chart
sort sortstar_half star halfsubject subject
trending_flat trending flattoc toctrending_down trending down
trending_up trending upundo undoview_list view list
view_quilt view quiltwrap_text wrap text}