swift를 사용하여 .svg 이미지를 표시하는 방법
프로젝트에 표시할 .svg 이미지 파일이 있습니다.
.png 및 .jpg 이미지 형식에는 작동하지만 .svg 확장자에는 작동하지 않는 UIImageView를 사용해 보았습니다.UI WebView 또는 UI ImageView를 사용하여 .svg 이미지를 표시할 수 있는 방법이 있습니까?
Swift에는 SVG에 대한 내장 지원이 없습니다.그래서 우리는 다른 도서관을 이용할 필요가 있습니다.
swift에있러리 SVG라는같다니입니다.
스위프트 SVG 라이브러리
등으로 UIView, CASapeLayer, Path 등에 합니다.
하고 UI 링크에 내 할 수 . SVG 색상수 UI 미져기의리라확러장브다수있니습사할용코를드.
Swift 사용에 대한 자세한 내용은 여기를 클릭하십시오.SVG 라이브러리:
사 를 사용하여 SVG for Image 설정 를 SVG 는 SVG
|OR|
SVG 키트 라이브러리
2.1) 포드를 사용하여 설치:
pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'
2.2) 프레임워크 추가
앱
> 반일탭
Frameworks Libraries로 다운 -> Linked Frameworks and Libraries로 이동합니다.
> 플러아콘클릭이스클 -릭▁-▁plus▁icon▁on
선택-> SVG.framework를 선택합니다.
2.3) 목표 C를 Swift 브리지 파일 bridging-header에 추가.h:
#import <SVGKit/SVGKit.h>
#import <SVGKit/SVGKImage.h>
2.4) Project에서 SvgImg 폴더(구성 개선을 위해)를 생성하고 그 안에 SVG 파일을 추가합니다.
참고: Inside Assets Folder를 추가해도 작동하지 않으며 SVGKit는 Project 폴더에서만 파일을 검색합니다.
2.5) Swift Code에서 다음과 같이 사용:
import SVGKit
그리고.
let namSvgImgVar: SVGKImage = SVGKImage(named: "NamSvgImj")
참고: SVGKit 자동으로 지정한 문자열에 확장자 ".svg"를 추가합니다.
let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)
let namImjVar: UIImage = namSvgImgVar.UIImage
SVGKimage 및 SVGKimageView를 초기화할 수 있는 더 많은 옵션이 있습니다.
또한 탐색할 수 있는 다른 클래스도 있습니다.
SVGRect
SVGCurve
SVGPoint
SVGAngle
SVGColor
SVGLength
and etc ...
SVG 파일 지원이 Xcode 12에 추가되었습니다.
이 코드를 사용해 보십시오.
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
URL에서 UIImageView에 .svg를 표시하는 내 솔루션입니다. SVGKit 포드를 설치해야 합니다.
그런 다음 다음과 같이 사용합니다.
import SVGKit
let svg = URL(string: "https://openclipart.org/download/181651/manhammock.svg")!
let data = try? Data(contentsOf: svg)
let receivedimage: SVGKImage = SVGKImage(data: data)
imageview.image = receivedimage.uiImage
또는 비동기 다운로드에 확장을 사용할 수 있습니다.
extension UIImageView {
func downloadedsvg(from url: URL, contentMode mode: UIView.ContentMode = .scaleAspectFit) {
contentMode = mode
URLSession.shared.dataTask(with: url) { data, response, error in
guard
let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
let data = data, error == nil,
let receivedicon: SVGKImage = SVGKImage(data: data),
let image = receivedicon.uiImage
else { return }
DispatchQueue.main.async() {
self.image = image
}
}.resume()
}
}
사용 방법:
let svg = URL(string: "https://openclipart.org/download/181651/manhammock.svg")!
imageview.downloadedsvg(from: svg)
예를 들어 SVGKit를 사용할 수 있습니다.
지침에 따라 통합합니다..framework 파일을 빠르고 쉽게 드래그 앤 드롭할 수 있습니다.
Import 코드가 포함된 Objective-C to Swift 브리지 파일 bridging-header.h가 있는지 확인합니다.
#import <SVGKit/SVGKit.h>
#import <SVGKit/SVGKImage.h>
데이터 출처를 가정하여 프레임워크를 다음과 같이 사용합니다.인터넷은 이전에 네트워크에서 다운로드한 NSData입니다.
let anSVGImage: SVGKImage = SVGKImage(data: dataFromInternet)
myIUImageView.image = anSVGImage.UIImage
이 프레임워크는 또한 다른 소스에서 SVGKI 이미지를 시작할 수 있습니다. 예를 들어 URL을 제공하면 이미지를 다운로드할 수 있습니다. 하지만 제 경우에는 URL에 도달할 수 없을 경우 충돌이 발생했기 때문에 네트워킹을 스스로 관리하는 것이 더 낫습니다.자세한 내용은 여기를 참조하십시오.
.xcassets에서 새 심볼 이미지 세트를 추가한 다음 SVG 파일을 추가할 수 있습니다.
이미지처럼 똑같이 사용합니다.
참고: 이것은 모든 SVG에서 작동하지 않습니다.사과 설명서를 볼 수 있습니다.
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
}
타사 라이브러리
https://github.com/exyte/Macaw
https://github.com/mchoe/SwiftSVG
UI WebView 및 WKWebView 부스터를 통해 더 빠르게 로드
https://github.com/bernikovich/WebViewWarmUper
을 하고 싶은 경우.WKWebView에서 전송되는 .vmsg 이미지를 로드합니다.URLRequest다음과 같이 간단히 달성할 수 있습니다.
스위프트 4
if let request = URLRequest(url: urlString), let svgString = try? String(contentsOf: request) {
wkWebView.loadHTMLString(svgString, baseURL: request)
}
다른 방법보다 훨씬 간단하며 .svg 문자열을 나중에 로드하기 위해 필요한 경우 오프라인에서도 유지할 수 있습니다.
이미지를 문자열로 유지하고 WKWebView를 사용하여 다음을 표시할 수 있습니다.
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
}()
SVGKit는 URL에서 이미지를 얻는 데 도움이 되었습니다.
저먼추를 합니다.pod 'SVGKit'Pod 파일에 있습니다.
번째, 둘째,import SVGKit당신의 반으로.
셋째, SVG 이미지의 개체를 만듭니다.
let mySVGImage: SVGKImage = SVGKImage(contentsOf: URL(string: path))
마지막으로 이 이미지를 UIImageView에 추가합니다.
yourImageView.image = mySVGImage.uiImage
XCode 12부터 SVG 자산을 프로젝트에 추가할 수 있습니다.
프로젝트에 svg 파일 추가하기
- svg 파일을 자산 카탈로그로 끌어다 놓습니다.
- 새로 추가된 자산을 선택했습니다.
- 당신의 svg 이미지가 1x로 추가됩니다.선택하고 다음을 변경합니다.
Scales의Single Scale속성 검사기입니다.
를 SVG 이할수있클간래다니로 할 수 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
}
}
SVG 파일을 렌더링하려면 Macaw를 사용할 수 있습니다.또한 Macaw는 변환, 사용자 이벤트, 애니메이션 및 다양한 효과를 지원합니다.
코드 라인이 0개인 SVG 파일을 렌더링할 수 있습니다.자세한 내용은 다음 문서를 참조하십시오: Macaw로 SVG 파일 렌더링.
고지 사항: 저는 이 프로젝트에 소속되어 있습니다.
그래픽 형식은 두 가지로 알고 있습니다.
- 래스터 그래픽(비트맵 사용)은 JPEG, PNG, APNG, GIF 및 MPEG4 파일 형식으로 사용됩니다.
- 벡터 그래픽(점, 선, 곡선 및 기타 도형 사용)벡터 그래픽은 SVG, EPS, PDF 또는 AI 그래픽 파일 형식으로 사용됩니다.
그래서 만약 당신이 당신의 Xcode에서 SVG File에 저장된 이미지를 사용해야 한다면, 저는 다음을 제안합니다.
SVG 파일을 PDF로 변환합니다.저는 https://document.online-convert.com/convert/svg-to-pdf 을 사용했습니다.
Xcode를 사용하여 PDF 파일을 관리합니다.
'SVGParser'라는 포드를 사용할 수 있습니다.https://cocoapods.org/pods/SVGParser .
포드 파일에 추가한 후 이 모듈을 사용할 클래스로 가져오기만 하면 됩니다.이미지 보기에 SVG 이미지를 표시해야 합니다.
이 SVG 영상을 표시할 수 있는 세 가지 경우가 있습니다.
- 로컬 경로에서 SVG를 데이터로 로드
- 로컬 경로에서 SVG 로드
- 원격 URL에서 SVG 로드
GitHub: https://github.com/AndreyMomot/SVGParser 에서도 프로젝트 예제를 찾을 수 있습니다.프로젝트를 다운로드하여 실행하면 어떻게 작동하는지 확인할 수 있습니다.
여기 객관적인 c 솔루션이 있습니다.
- (void)loadSVG:(NSString *)url {
if (url.length == 0) return;
[[[NSURLSession sharedSession] dataTaskWithURL:[NSURL URLWithString:url]
completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
NSHTTPURLResponse *httpURLResponse = (NSHTTPURLResponse *) response;
if (error == nil && [response.MIMEType hasPrefix:@"image"] && httpURLResponse.statusCode == 200)
{
SVGKImage *receivedIcon = [SVGKImage imageWithData:data];
dispatch_async(dispatch_get_main_queue(), ^{
imageView.backgroundColor = [UIColor clearColor];
imageView.image = receivedIcon.UIImage;
});
} else {
NSLog(@"error %@ ", error.localizedDescription);
}
}] resume];
}
언급URL : https://stackoverflow.com/questions/35691839/how-to-display-svg-image-using-swift
'programing' 카테고리의 다른 글
| SQL: 특정 날짜에 대한 시간 범위에서 작성된 레코드 가져오기 (0) | 2023.08.14 |
|---|---|
| Sql 문이 Maria DB와 Mysql에서 서로 다른 결과를 가져옵니다. (0) | 2023.08.14 |
| 마지막으로 Git에 밀어넣은 것을 롤백할 방법이 있습니까? (0) | 2023.08.14 |
| 업데이트 모듈에서 리포지토리를 찾을 수 없음 (0) | 2023.08.14 |
| 텍스트 영역 - x 또는 y에서 크기 조정을 비활성화하시겠습니까? (0) | 2023.08.14 |