This is a fork of Exyte's SVGViewer repository, which adds properties that make it easier and more powerful to interact with SwiftUI Paths. The original project brings the power of SVG to Apple platforms, by parsing SVG files and representing their content in SwiftUI.
Get started with SVGView in a few lines of code:
struct ContentView: View {
var body: some View {
SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
}
}This fork in particular adds additional properties to the rendered paths to animate their trim and control the stroke of the path.
struct ContentView: View {
var body: some View {
let view = SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
if let part = view.getNode(byId: id) {
part.trimTo = 0 // Set the trimTo to 0, so it can be animated to 1 for a "drawn in" effect
part.pathStroke = SVGStroke(fill: SVGColor(uiColor: .label), width: 5, cap: .round) // Set the property of the Path stroke, using uiColor with an SVGColor extension
}
return view
}
}You can change various parameters for the nodes like this:
let circle = SVGCircle(cx: 30, cy: 30, r: 30)
circle.fill = SVGColor.black
circle.stroke = SVGStroke(fill: SVGColor(hex: "ABCDEF"), width: 2)
circle.onTapGesture {
print("tap")
}You may locate the desired part of your SVG file using standard identifiers to add gestures and change its properties in runtime:
struct ContentView: View {
var body: some View {
let view = SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
if let part = view.getNode(byId: "part") {
part.onTapGesture {
part.opacity = 0.2
}
}
return view
}
}You can use standard SwiftUI tools to animate your image:
if let part = view.getNode(byId: "part") {
part.onTapGesture {
withAnimation {
part.opacity = 0.2
}
}
}SVGView makes it easy to add custom effects to your app. For example, make this pikachu track finger movement:
var body: some View {
let view = SVGView(contentsOf: Bundle.main.url(forResource: "pikachu", withExtension: "svg")!)
let delta = CGAffineTransform(translationX: getEyeX(), y: 0)
view.getNode(byId: "eye1")?.transform = delta
view.getNode(byId: "eye2")?.transform = delta
return view.gesture(DragGesture().onChanged { g in
self.x = g.location.x
})
}
Our mission is to provide 100% support of all SVG standards: 1.1 (Second Edition), Tiny 1.2 and 2.0. However, this project is at its very beginning, so you can follow our progress on this page. You can also check out SVGViewTests project to see how well this framework handles every single SVG test case.
dependencies: [
.package(url: "https://github.com/exyte/SVGView.git")
]pod 'SVGView'github "Exyte/SVGView"
- iOS 14+ / watchOS 7+ / macOS 11+
- Xcode 12+
PopupView - Toasts and popups library
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with a number of preset animations
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
OpenAI Wrapper lib for OpenAI REST API
AnimatedGradient - Animated linear gradient
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
FlagAndCountryCode - Phone codes and flags for every country
LiquidSwipe - Liquid navigation animation