Tag: svg

使用SVG在iOS应用中实现分辨率独立性

拥有各种尺寸的设备非常适合允许用户选择适合自己的设备，但是支持分辨率和像素密度的所有这些组合可能很麻烦。 即使您以某种矢量格式开发所有原始图稿，通常也必须以各种尺寸和密度将其导出为PNG格式。 如果您的应用程序中只有几个图像，这可能是可管理的，但是随着图像数量的增加，它很快就会变得笨拙而乏味。 另外，如果您有任何全屏（特别是iPad尺寸）图像，则以多个密度包含同一图像的冗余副本将迅速增加应用程序的总体存储空间需求。 另外，您也可以直接在应用程序中使用矢量图像。 此时，Xcode支持的唯一矢量格式是PDF。 您可以将PDF添加到资产管理器，它会按预期显示在Interface Builder中。 但是，在构建应用程序时实际发生的事情是，这些漂亮的矢量图像在编译时就被光栅化了。 因此，在运行时，您仍在处理固定大小的PNG图像。 这意味着您仍然受制于多个冗余映像的空间开销。 而且，如果您的应用在运行时对图像大小执行任何操作，您仍然会注意到一些像素化。 这就是SVG出现的地方。 救援的SVG 如果您还不熟悉SVG，它是一种基于XML的矢量图像格式，这意味着即使与PNG相比，它的文件大小也相对较小。 作为矢量图像，它仅包含用于重绘图像的指令，而不包含实际的图像位图数据。 只需说一句，您只需在应用程序中包含一个SVG副本。 这可以大大减少应用程序的存储需求，并简化应用程序图稿的管理。 由于Xcode不支持SVG，因此您需要找到第三方库才能将SVG支持添加到您的应用中。 我在最新的iOS项目中一直使用的是SVGKit。 它具有一个缓存系统以减少解析SVG文件的开销，并且它使用CoreAnimation层进行渲染以避免大多数性能问题。 使用Interface Builder进行布局 如果要使用Interface Builder设计布局，则可以为SVG添加图像视图，但是直到运行时才能看到图像。 由于Xcode和Interface Builder不直接支持SVG，因此，我们将不得不采用一个小的解决方法。 1.在Interface Builder中，将新的View对象添加到您的界面中（这在可用对象列表的结尾附近）。 2.像往常一样将此新视图约束到其他视图。 使用矢量图像的好处是您可以灵活选择尺寸。 但是，我仍然建议添加与源图像的宽高比匹配的宽高比约束。 这将防止图像因其他约束而失真。 3.将视图的类更改为SVGKFastImageView 。 这不会影响其在设计时的外观，但是当在运行时加载笔尖时，视图将是此类的一个实例。 4.将IBOutlet添加到视图控制器类，并将其连接到在步骤1中添加的视图。 5.用代码将所需图像加载到视图中。 例如： 请参阅完整文章中的代码。 使用代码进行布局 如果要通过在代码中构造视图对象来设置界面，则该过程可能与您已经在做的事情有点相符。 这样的事情将为您提供SVG图像视图并将图像加载到其中： 请参阅完整文章中的代码。 尽管上面的代码可以工作，没有任何限制，但是图像将根据SVG的内部尺寸进行调整。 因此，您仍然需要添加一些约束来控制图像大小。 如果您要添加更多其他相同的具有不同大小的图像视图，则可以看到图像可以缩放而不会降低质量： 其他提示 如果发现加载SVG图像时布局变得混乱，请尝试使用抗压缩性和内容优先的图像视图。 通常可以将它们设置为1（最小值），以确保图像视图仅从其他约束中获得其大小，而不从其固有大小中获得。 最后，由于我项目中的SVG混合了明暗，大大小小的等等，因此尝试在Finder中预览不是一件容易的事。 因此，我使用以下脚本来生成一个HTML页面，其中包含当前目录中所有SVG图像的预览。 随意使用它，并根据需要对其进行调整！ 请参阅完整文章中的代码。

iOS（Swift 4.0）中的SVG或TTF图标，无需使用任何第三方库。

根据iOS设计标准，我们需要保持其类，质量设计，最重要的是使用尽可能少的内存。 Android开发人员大部分时间在应用程序中使用TTF图标或SVG图标，因此，他们不一定要固定图标的大小，他们可以根据需要调整图标的大小。 现在，在iOS中，我们可以使用TTF或SVG图标并将其用作UILable并以大小播放，而不必担心像素化图像/图标。 我在下面分享步骤。 选择FontAwesome（或您的ttf文件名）。 真是太容易了。 😛 等待最后一步。 步骤5（上一个）：打开字体文件，选择要使用的图标并复制它。 粘贴到情节提要/ XIB中的UILable文本区域。 而已。 万岁！ 您可以使用此文件中的任何图标，并且https://fontawesome.com/cheatsheet?from=io中已经有很多图标可用。 您只需要复制粘贴标签文本即可。 步骤1、2和3是一个项目的一次性过程，如果要在另一个项目中使用相同的TTF文件，请跳过步骤1和2。 按钮也有相同的过程。 它节省了很多开发人员和设计人员的内存和时间，并且还保持了质量标准。

从SVGstring创build一个UIImage

嗨，我试图从我从服务器获得的数据呈现SVG图像。 我用一个名为SVGgh的库使用这个代码 – NSData *svgData = [[NSData alloc] initWithBase64EncodedString:svgStr options:0]; NSString* newStr = [[NSString alloc] initWithData:svgData encoding:NSUTF8StringEncoding]; NSString *finalString = [NSString stringWithFormat:@"<?xml version=\"1.0\" encoding=\"UTF-8\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">%@", newStr]; aRenderer = [[SVGRenderer alloc] initWithString:finalString]; UIImage *image = [aRenderer asImageWithSize:CGSizeMake(200, 200) andScale:1.0]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = CGRectMake(0, 0, 200.0, 200.0); imageView.backgroundColor […]

Swift SVG Fil颜色到SVGImage

我正在使用SVGKit来显示图像 https://github.com/SVGKit/SVGKit/ 如何为SVGImage应用填充颜色 let namSvgImgVar = SVGKImage(named: namSvgImg) namSvgImgVar.setFilColor() 想要实现这个setFilColor函数

在SVG for iOS Chrome和Safari中显示自定义字体

我使用的谷歌自定义字体的svg，但我自己托pipe。 这里是以下代码的SVG文件 ： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="430" height="590"> <defs> <style type="text/css"><![CDATA[ @font-face { font-family: 'Fjalla'; src: url('http://build-podcast.com/fonts/fjalla.eot'); src: url('http://build-podcast.com/fonts/fjalla.eot?#iefix') format('embedded-opentype'), url('http://build-podcast.com/fonts/fjalla.woff') format('woff'), url('http://build-podcast.com/fonts/fjalla.ttf') format('truetype'), url('http://build-podcast.com/fonts/fjalla.svg#fjalla') format('svg'); font-weight: normal; font-style: normal; } text { font-family: Fjalla, sans-serif; font-weight: bold; fill: #4b5568; } ]]> </style> </defs> <g id="logo"> <text x="135" y="60" font-size="210" transform="rotate(45)">/</text> <text x="115" y="363" font-size="210" […]

在iOS中显示vector图像（SVG或FXG）

我想在iOS应用程序中以Adobe FXG文件格式（从Flash导出）或SVG格式显示图像。 有没有可以渲染vectorgraphics的Objective-C工具或库？ （我不想将我的图像转换为位图格式！我想保持vector格式）

SVG viewbox高度问题在ios Safari上

使用svg时，我注意到了一个奇怪的事情。 svgs似乎在所有其他浏览器中工作正常，但在Safari的ipad / iphone上，viewbox在svg的顶部和底部有一些奇怪的空间。 有没有其他人遇到这个，你有能力解决它？ 使用一些简单的svg代码，如： <svg width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> 在ipad / iphone上，如果我把一个边框上的svg有奇怪的空间上方和下方的SVG …？ 小提琴的好处在桌面上看起来很正常，但如果你在ipad等上看，你会看到问题。 http://jsfiddle.net/InVAMPED/hck5gg1a/

在iOS中包含HTML5中的SVG

我想在HTML5网页中包含SVG图像，通过JavaScript与SVG进行交互，并应用CSS样式。 如果可能的话，我宁愿将SVG保存在一个单独的文件中。 我希望能够离线使用网页，所以希望任何解决schemebuild议将与此兼容。 请有人build议这样做最好的/最多的跨浏览器兼容的方式？ 如果没有一种方法可以在所有的浏览器上运行的话，我会很乐意去解决一个适用于iOS 4.3的Safari浏览器的方法:-) 提前致谢！ 感谢大家，并道歉不要更新更快 – 不幸的是，我分心了另一个项目！ 经过一段时间玩各种替代选项，（ http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html ）我还是没有能够使用外部的.svg文件，并保持在主HTML5文件的JS – 即我一直无法获得这些方法来允许SVG文件引用JSfunction，或允许HTML文件获得访问包含的SVG文件中的元素。 即使内联SVG在iOS上还没有工作:(所以，我要用Raphael（http://raphaeljs.com）来试试我的运气，我认为这可能意味着我需要编程创buildSVG而不是只能链接到一个外部的.svg文件，我只需要编写一个脚本来将SVG内容转换成JS Raphael函数调用，并希望避免其他任何绊脚石。

在Safari iOS 10中，SVG转换旋转90,180或270度不能在圆上工作

我想通过设置stroke-dasharray和不同的stroke-dashoffset来创build一个使用SVG圆元素的圆环图。 SVG元素需要旋转270（或-90）度，以使图表“栏”从顶部开始。 这里是代码： http://jsfiddle.net/q3wb6gkq/ 使用transform="rotate(270, 80, 80)"的第一个数字指定旋转angular度。 问题是：在iOS 10上的Safari中查看时，此旋转不适用。 实际上，设置90,180或270度旋转不起作用。 相同的angular度，但负面（例如-90）也不适用。 下面是iOS 10.0.1上的Safari上的一个小屏幕截图： 这里是在iOS 9.3.5 Safari浏览器相同的小提琴： 作为一种解决方法，我发现使用像270.1度这样的东西解决了这个问题，但是我想知道为什么270不能正常工作，是否有更好的方法来处理它。

WKWebView显示设备上的空白，在模拟器上工作

我的应用程序的一个模块是一个网站。 该网站主要包含一个SVG图纸，用自定义形状的button（使用Raphael.js库）来访问其他图纸（其他html页面与svg图纸）。 如果设备在iOS 7上，我使用一个UIWebView，一切工作正常。 对于iOS 8设备，我使用WKWebView。 我有一些问题，其中一些解决了这个职位 。 我可以在这些模拟器（iPhone 5 / iOS 8.0（12A365）和iPhone 5s / iOS 8.0）上看到我的网站，但我无法在iPod Touch上看到它（第5代，运行iOS 8.0.2）。 它显示一个空白的屏幕。 我不知道该找什么。 任何想法？ 编辑 遵循@Dan Fabulich的回答（ 在这里 ），我现在得到一个永远加载的web视图，永远不会完成加载。 他的回答告诉我们，从string加载html时，WKWebView存在一个错误。 他的答案是将html内容复制到一个新的子文件夹中，然后从该URL调用loadRequest 。 不幸的是，我仍然坚持一个非工作的webview。 任何线索？ 什么是一个webview永远不会完成加载内容的原因？