iOS Swift 将 SVG 图像添加到按钮，如 Android

Posted 2023-05-06

【中文标题】iOS Swift 将 SVG 图像添加到按钮，如 Android

【英文标题】：iOS Swift Add SVG Image to button like Android

【发布时间】：2018-01-23 11:22:32

【问题描述】：

在 android 中，我们可以将 SVG 导入为 Vector XML， 将此用作可绘制对象， 更改 SVG 图标的颜色并添加到按钮

void setSvgIcnForBtnFnc(Button setBtnVar, int setSvgVar, int setClrVar, String PosVar)

    Drawable DevDmjVar = getDrawable(setSvgVar);
    DevDmjVar.setBounds(0,0,Dpx24,Dpx24);
    DevDmjVar.setColorFilter(new PorterDuffColorFilter(setClrVar, PorterDuff.Mode.SRC_IN));
    switch (PosVar)
    
        case "Tit" : setBtnVar.setCompoundDrawables(null, DevDmjVar, null, null); break;
        case "Rit" : setBtnVar.setCompoundDrawables(null, null, DevDmjVar, null); break;
        case "Pit" : setBtnVar.setCompoundDrawables(null, null, null, DevDmjVar); break;
        default: setBtnVar.setCompoundDrawables(DevDmjVar, null, null, null); break;
    

如何在 iPhone 上快速执行此操作？

setBtnVar.setImage(<image: UIImage?>, forState: <UIControlState>)

【参考方案1】：

UPD：另见UseYourLoaf blog post

刚刚在Erica Sadun blog post 上发现你在iOS 11 上could use Vector Assets。

什么是“矢量资产”：

如果您点击该框，矢量数据将随您的 应用。一方面，这使您的应用程序有点 大一点，因为矢量数据占用了一些空间。但在 另一方面，您将有机会缩放这些图像，这 在许多不同的情况下可能很有用。所以，一个是，如果 你知道这个特定的图像将被多次使用 尺寸。但这可能不太明显。所以，一个案例是象征性的 应该使用动态类型调整大小的字形。既然我们在考虑 动态类型，您还应该考虑使用以下字形 出现在适当调整大小的类型旁边。另一个案例是 真的不明显，是标签栏图片。 ... 有一个非常棒的可访问性功能，我们强烈 推荐支持，这允许已经转过身的用户 动态类型大小。 ...因此，我们强烈建议您这样做以提高您的应用在所有用户中的可用性

使用方法：

将 SVG 文件转换为 PDF，例如在ZamZar.com 将您的 pdf 添加到 Assets.xcassets 为导入的pdf点击“保留矢量数据”。 在您的UIViewController 中创建UIImageView 并分配像UIImage 这样的pdf 文件。

或 Mac App Store 中提供的Asset Catalog Creator 将通过简单的拖放操作完成第 1 步和第 2 步。

---

iOS

没有原生方式来使用 SVG 图像。

看看Macaw

通过Cocoapod导入框架

pod "Macaw", "0.8.2"

检查他们的example project：这是您渲染tiger.svg 的方式（位于项目目录中，而不是Assets.xcassets 文件中）

import UIKit
import Macaw

class SVGExampleView: MacawView 

    required init?(coder aDecoder: NSCoder) 
        super.init(node: SVGParser.parse(path: "tiger"), coder: aDecoder)
    

---

当然还有一些其他的第三方库：

SwiftSVG Snowflake SVGKitObjective-C 框架

【讨论】：

请注意：ios11 显然支持矢量（我假设为 pdf），而无需先将它们渲染为图像。如果它们有很多，那么找到一种方法将它们转换为您的工作流程可能是值得的。

【参考方案2】：

在一场噩梦之后，我想出了在使用 Swift 的按钮中使用 SVG 的解决方案。 这是给所有不想像我一样挣扎的人

我使用简单的 SwiftSVG 库从 SVG 文件中获取 UIView

用法：

namBtnVar.setSvgImgFnc("ikn_sev", ClrVar: UIColor.cyanColor())

安装SwiftSVG库

1) 使用pod安装：

// 对于 Swift 3

pod 'SwiftSVG'

// 对于 Swift 2.3

pod 'SwiftSVG', '1.1.5'

2) 添加框架

转到应用设置 -> 常规选项卡 -> 向下滚动到链接的框架和库 -> 点击加号图标 -> 选择 SVG.framework

3) 在项目中的任意位置添加以下代码

extension UIButton

    func setSvgImgFnc(svgImjFileNameVar: String, ClrVar: UIColor)
    
        setImage((getSvgImgFnc(svgImjFileNameVar, ClrVar : ClrVar)), forState: .Normal)
    


func getSvgImgFnc(svgImjFileNameVar: String, ClrVar: UIColor) -> UIImage

    let svgURL = NSBundle.mainBundle().URLForResource(svgImjFileNameVar, withExtension: "svg")
    let svgVyuVar = UIView(SVGURL: svgURL!)

    /* The width, height and viewPort are set to 100 

        <svg xmlns="http://www.w3.org/2000/svg"
             
            viewBox="0 0 100 100">

        So we need to set UIView Rect also same
    */

    svgVyuVar.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    for svgVyuLyrIdx in svgVyuVar.layer.sublayers!
    
        for subSvgVyuLyrIdx in svgVyuLyrIdx.sublayers!
        
            if(subSvgVyuLyrIdx.isKindOfClass(CAShapeLayer))
            
                let SvgShpLyrIdx = subSvgVyuLyrIdx as? CAShapeLayer
                SvgShpLyrIdx!.fillColor = ClrVar.CGColor
            
        
    
    return svgVyuVar.getImgFromVyuFnc()


extension UIView

    func getImgFromVyuFnc() -> UIImage
    
        UIGraphicsBeginImageContext(self.frame.size)

        self.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()
        return image!
    

【讨论】：

我应该感谢@Aleksey Potapov 的提示和建议，所以我想出这个。

【参考方案3】：

如果您在导入后为 Scale Factors 选择 Single Scale，则可以原生使用基于矢量的 PDF。

PDF 的尺寸将是资产的 1x 尺寸。

Xcode 将为每个比例生成光栅化图像。然后，您可以像使用任何其他图像一样使用它。

【参考方案4】：

我使用了 Aleksey Potapov 的答案。转换和一切都很完美！ 但是，我遇到了一个问题，即我的图像对于我的应用程序来说太大了。

所以使用它来调整它的大小以适合 ios 开发：

<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">

【参考方案5】：

查看我的应用程序：Speculid 它会根据您的资产库的设置方式自动将 SVG 转换为 PDF 或 PNG。