ios - fondo - Cómo mostrar la imagen.svg usando swift

imagen de fondo en xcode

Question

Tengo un archivo de imagen .svg que quiero mostrar en mi proyecto.

Intenté usar UIImageView, que funciona para los formatos de imagen .png y .jpg, pero no para la extensión .svg. ¿Hay alguna manera de mostrar una imagen .svg usando UIWebView o UIImageView?

Answer 1

Versión Swift 3.0:

let path = Bundle.main.path(forResource: "svgNameFileHere", ofType: "svg")!
if path != "" {
    let fileURL:URL = URL(fileURLWithPath: path)
    let req = URLRequest(url: fileURL)
    self.webView.scalesPageToFit = false
    self.webView.loadRequest(req)
}
else {
   //handle here if path not found
}

Bibliotecas de terceros

https://github.com/exyte/Macaw

SwiftSVG

UIWebView y WKWebView Booster para cargar más rápido

https://github.com/bernikovich/WebViewWarmUper

Answer 2

Aquí hay una clase simple que puede mostrar imágenes SVG en una UIView

import UIKit

public class SVGImageView: UIView {
    private let webView = UIWebView()

    public init() {
        super.init(frame: .zero)
        webView.delegate = self
        webView.scrollView.isScrollEnabled = false
        webView.contentMode = .scaleAspectFit
        webView.backgroundColor = .clear
        addSubview(webView)
        webView.snp.makeConstraints { make in
            make.edges.equalTo(self)
        }
    }

    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    deinit {
        webView.stopLoading()
    }

    public func load(url: String) {
        webView.stopLoading()
        if let url = URL(string: fullUrl) {
            webView.loadRequest(URLRequest(url: url))
        }
    }
}

extension SVGImageView: UIWebViewDelegate {
    public func webViewDidFinishLoad(_ webView: UIWebView) {
        let scaleFactor = webView.bounds.size.width / webView.scrollView.contentSize.width
        if scaleFactor <= 0 {
            return
        }

        webView.scrollView.minimumZoomScale = scaleFactor
        webView.scrollView.maximumZoomScale = scaleFactor
        webView.scrollView.zoomScale = scaleFactor
    }
}

Answer 3

En caso de que desee utilizar un WKWebView para cargar una imagen .svg que proviene de una URLRequest , simplemente puede lograrlo de esta manera:

Swift 4

if let request = URLRequest(url: urlString), let svgString = try? String(contentsOf: request) {
  wkWebView.loadHTMLString(svgString, baseURL: request)
}

Es mucho más simple que las otras formas de hacerlo, y también puede conservar su cadena .svg en algún lugar para cargarla más tarde, incluso fuera de línea si es necesario.

Answer 4

No hay soporte incorporado para SVG en Swift. Entonces necesitamos usar otras bibliotecas.

Las bibliotecas SVG simples en swift son:

1) Biblioteca SwiftSVG

Te da más opciones para Importar como UIView, CAShapeLayer, Path, etc.

Para modificar su Color SVG e Importar como UIImage, puede usar mis códigos de extensión para la biblioteca mencionada en el siguiente enlace,

Haga clic aquí para saber sobre el uso de la biblioteca SwiftSVG :
Usando SwiftSVG para configurar SVG para Imagen

| O |

2) Biblioteca github.com/SVGKit/SVGKit

2.1) Use el pod para instalar:

pod ''SVGKit'', :git => ''https://github.com/SVGKit/SVGKit.git'', :branch => ''2.x''

2.2) Agregar marco

Ir a la configuración de la aplicación
-> Pestaña General
-> Desplácese hacia abajo para bibliotecas y marcos vinculados
-> Haga clic en el icono más
-> Seleccione SVG.framework

2.3) Agregue Objective-C al archivo de puente Swift bridging-header.h:

#import <SVGKit/SVGKit.h>
#import <SVGKit/SVGKImage.h>

2.4) Crear carpeta SvgImg (para una mejor organización) en Project y agregar archivos SVG dentro de ella.

Nota: Agregar la carpeta de activos internos no funcionará y SVGKit busca el archivo solo en las carpetas del proyecto

2.5) Use en su Código Swift de la siguiente manera:

import SVGKit

y

let namSvgImgVar: SVGKImage = SVGKImage(named: "NamSvgImj")

Nota: SVGKit agrega automáticamente la extensión ".svg" a la cadena que especifique

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

Hay muchas más opciones para iniciar SVGKImage y SVGKImageView

También hay otras clases que puedes explorar

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...

Answer 5

Para renderizar el archivo SVG puedes usar Macaw . También Macaw admite transformaciones, eventos de usuario, animación y varios efectos.

Puede representar el archivo SVG con cero líneas de código. Para obtener más información, consulte este artículo: Renderice el archivo SVG con Macaw .

Answer 6

Prueba este código

var path: String = NSBundle.mainBundle().pathForResource("nameOfFile", ofType: "svg")!

        var url: NSURL = NSURL.fileURLWithPath(path)  //Creating a URL which points towards our path

       //Creating a page request which will load our URL (Which points to our path)
        var request: NSURLRequest = NSURLRequest(URL: url)
       webView.loadRequest(request)  //Telling our webView to load our above request

Answer 7

Puede mantener sus imágenes como cadenas y usar WKWebView para mostrarlas:

let webView: WKWebView = {
    let mySVGImage = "<svg height=/"190/"><polygon points=/"100,10 40,180 190,60 10,60 160,180/" style=/"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;/"></svg>"
    let preferences = WKPreferences()
    preferences.javaScriptEnabled = false
    let configuration = WKWebViewConfiguration()
    configuration.preferences = preferences
    let wv = WKWebView(frame: .zero, configuration: configuration)
    wv.scrollView.isScrollEnabled = false
    wv.loadHTMLString(mySVGImage, baseURL: nil)
    return wv
}()

Answer 8

Puedes usar github.com/SVGKit/SVGKit por ejemplo.

1) Integrarlo según las instrucciones. Arrastrar y soltar el archivo .framework es rápido y fácil.

2) Asegúrese de tener un Objective-C to Swift bridge file bridging-header.h con el código de importación:

#import <SVGKit/SVGKit.h>
#import <SVGKit/SVGKImage.h>

3) Use el marco como este, suponiendo que dataFromInternet es NSData, previamente descargado de la red:

let anSVGImage: SVGKImage = SVGKImage(data: dataFromInternet)
myIUImageView.image = anSVGImage.UIImage

El marco también permite iniciar una imagen SVGK desde otras fuentes diferentes, por ejemplo, puede descargar imágenes para usted cuando le proporciona una URL. Pero en mi caso se estaba bloqueando en caso de URL inaccesible, por lo que resultó ser mejor administrar las redes por mí mismo. Más información sobre esto here .