Skip to content

Commit ed08143

Browse files
committed
Update README.md
Added tutorial about SVG/PDF with tint color using WebImage/AnimatedImage
1 parent e45f290 commit ed08143

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,26 @@ NavigationView {
419419
}
420420
```
421421

422+
#### Render vector image (SVG/PDF) with tint color
423+
424+
Both `WebImage/AnimatedImage` supports to render the vector image, by using the `SVG/PDF` external coders. However they are different internally.
425+
426+
+ `AnimatedImage`: use tech from Apple's symbol image and vector drawing, supports dynamic size changes without lossing details. And it use UIKit/AppKit based implementation and APIs. If you want, pass `.context(.imageThumbnailPixelSize: size)` to use bitmap rendering and get more pixels.
427+
+ `WebImage`: draws vector image into a bitmap version. Which just like normal PNG. By default, we use vector image content size (SVG canvas size or PDF media box size). If you want, pass `.context(.imageThumbnailPixelSize: size)` to get more pixels.
428+
429+
For `WebImage` (or bitmap rendering on `AnimatedImage`), you can also tint the SVG/PDF icons with custom colors (like symbol images), use the `.renderingMode(.template)` and `.foregroundColor(color)` modifier, which matches `SwiftUI.Image` behavior.
430+
431+
```swift
432+
var body: some View {
433+
WebImage(url: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg"))
434+
.resizable()
435+
.renderingMode(.template)
436+
.foregroundColor(.red)
437+
.scaledToFit()
438+
}
439+
```
440+
441+
See more: [Configuring and displaying symbol images in your UI](https://developer.apple.com/documentation/uikit/uiimage/configuring_and_displaying_symbol_images_in_your_ui?language=objc)
422442

423443
#### Using with external loaders/caches/coders
424444

0 commit comments

Comments
 (0)