SVG图像加载扩展

SVG图像加载扩展

本页面收录了多个强大的SVG（可缩放矢量图形）图像加载扩展，为App Inventor应用提供了丰富的矢量图形处理能力。SVG扩展允许应用加载、显示和操作矢量图形，支持无限缩放而不失真。

扩展列表

1. SVGImages

来源: Kodular社区

下载和安装

SVGImages扩展: com.SVGImages.aix

功能概述

SVGImages扩展提供基础的SVG图像加载和显示功能：

SVG文件加载和显示
基本的图像缩放和定位
简单的SVG操作方法

属性

宽度: 设置SVG图像的显示宽度，单位为像素。
高度: 设置SVG图像的显示高度，单位为像素。
可见: 设置SVG图像是否可见，true为显示，false为隐藏。

方法

从网络加载(URL地址): 从网络URL加载SVG文件。(版本2中新增)
从字符串加载(SVG字符串): 从SVG字符串数据加载图像。
从文件加载(文件路径): 从指定文件路径加载SVG文件。
从资源加载(资源路径): 从应用资源目录加载SVG文件。(在companion中不工作，请使用LoadFromFile)

事件

发生错误(错误信息): SVG加载过程中发生错误时触发。

2. PixzSVGImageLoader

来源: Kodular社区

下载和安装

PixzSVGImageLoader扩展: com.nikzdevz.PixZ.aix

功能概述

PixzSVGImageLoader V3是功能更强大的SVG图像加载器，提供：

高级SVG渲染引擎
丰富的SVG操作方法
动画和过渡效果支持
更好的性能优化
完整的SVG规范支持

属性

SVG内容: 获取或设置SVG的XML内容。
纵横比: 设置SVG图像的纵横比模式。
填充颜色: 设置SVG元素的填充颜色。
描边颜色: 设置SVG元素的描边颜色。
描边宽度: 设置SVG元素的描边宽度，单位为像素。
不透明度: 设置SVG图像的不透明度，范围为0.0-1.0。
旋转角度: 设置SVG图像的旋转角度，单位为度。
水平缩放: 设置SVG图像的水平缩放比例。
垂直缩放: 设置SVG图像的垂直缩放比例。

方法

从URL加载(URL地址): 从网络URL加载SVG文件。
从文件加载(文件路径): 从本地文件系统加载SVG文件。
从资源加载(资源路径): 从应用资源目录加载SVG文件。
设置元素颜色(元素ID,颜色): 设置指定SVG元素的颜色。
设置元素透明度(元素ID,透明度): 设置指定SVG元素的透明度。
动画元素(元素ID,动画类型,持续时间): 为指定SVG元素添加动画效果。
添加点击处理(元素ID): 为指定SVG元素添加点击事件处理。
获取元素边界(元素ID): 获取指定SVG元素的边界矩形。
导出为PNG(文件路径): 将SVG图像导出为PNG格式。
刷新(): 刷新SVG图像显示。

事件

加载完成(成功,错误信息): SVG文件加载完成时触发。成功为true，失败为false。
元素被点击(元素ID,坐标): SVG元素被点击时触发，返回元素ID和点击坐标。
动画完成(元素ID): SVG元素动画完成时触发。

使用示例

基础SVG加载 (SVGImages)

when Screen1.Initialize
do
    // 从文件加载SVG
    call SVGImages1.LoadFromFile "/storage/emulated/0/Documents/icon.svg"

when SVGImages1.ErrorOccurred error
do
    show notification "SVG加载失败: " & error

从网络加载SVG (SVGImages)

when Button1.Click
do
    // 从网络加载SVG文件
    call SVGImages1.LoadFromWeb "https://example.com/icon.svg"

高级SVG操作 (PixzSVGImageLoader)

when Button1.Click
do
    // 从URL加载SVG
    call PixZ1.LoadFromURL "https://example.com/icon.svg"

when PixZ1.LoadCompleted success error
do
    if success then
        // 设置SVG元素颜色
        call PixZ1.SetElementColor "icon" "#FF5722"

        // 添加动画效果
        call PixZ1.AnimateElement "icon" "rotate" 1000
    else
        show notification "SVG加载失败: " & error

动态颜色修改

when Button2.Click
do
    // 根据用户选择改变颜色
    if global Theme = "Dark" then
        call PixZ1.SetElementColor "background" "#121212"
        call PixZ1.SetElementColor "text" "#FFFFFF"
    else
        call PixZ1.SetElementColor "background" "#FFFFFF"
        call PixZ1.SetElementColor "text" "#000000"

交互式SVG

when PixZ1.ElementClicked elementID coordinates
do
    if elementID = "button1" then
        show notification "按钮1被点击"
        // 改变按钮颜色
        call PixZ1.SetElementColor "button1" "#4CAF50"
    else if elementID = "button2" then
        show notification "按钮2被点击"
        // 改变按钮颜色
        call PixZ1.SetElementColor "button2" "#2196F3"

SVG文件要求

标准SVG格式

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="50" cy="50" r="40" fill="#FF0000" />
  <rect id="rect" x="10" y="10" width="80" height="80" fill="#00FF00" />
</svg>

文件路径示例

资源文件: "file:///android_asset/icon.svg"
外部存储: "/storage/emulated/0/Documents/icon.svg"
网络URL: "https://example.com/icon.svg"

性能优化建议

文件大小: 保持SVG文件尽可能小，避免复杂的路径
缓存: 频繁使用的SVG应该缓存到本地
异步加载: 对于大型SVG文件，使用异步加载
硬件加速: 利用设备的硬件加速功能
内存管理: 及时释放不再使用的SVG资源

常见应用场景

1. 图标系统

// 动态加载不同主题的图标
when ThemeChanged
do
    if Theme = "Light" then
        call PixZ1.LoadFromAssets "icons/light/menu.svg"
    else
        call PixZ1.LoadFromAssets "icons/dark/menu.svg"

2. 数据可视化

// 根据数据显示不同的图表
when DataUpdated
do
    if Value > 50 then
        call PixZ1.SetElementColor "chart" "#4CAF50"
    else
        call PixZ1.SetElementColor "chart" "#F44336"

3. 游戏和动画

// 创建简单的SVG动画
when GameStart
do
    call PixZ1.LoadFromAssets "game/character.svg"
    call PixZ1.AnimateElement "character" "bounce" 500

4. 自定义UI组件

// 创建可交互的SVG按钮
when CreateButton
do
    call PixZ1.LoadFromAssets "ui/custom-button.svg"
    call PixZ1.AddClickHandler "button"

故障排除

常见问题

Q: SVG文件不显示？ A: 检查文件路径是否正确，确保SVG格式符合标准。

Q: 颜色设置不生效？ A: 确保SVG元素具有正确的ID属性，检查颜色格式是否为十六进制。

Q: 性能问题？ A: 优化SVG文件大小，减少复杂路径的数量。

Q: 在某些设备上显示异常？ A: 检查Android版本兼容性，某些旧版本可能不支持所有SVG特性。

Q: 动画不流畅？ A: 降低动画复杂度，使用硬件加速。

兼容性说明

最低Android版本: Android 5.0 (API 21)
推荐Android版本: Android 7.0+ (API 24+)
SVG规范支持: SVG 1.1
性能: 在较新设备上表现更好

开发资源

SVG设计工具

Adobe Illustrator
Inkscape (免费)
Figma
SVGOMG (优化工具)

在线SVG资源

技术文档

本文档基于Kodular社区的SVG扩展讨论整理，更多信息请参考SVGImages和PixzSVGImageLoader原始帖子。

SVG图像加载扩展 - 第三方扩展集合

SVG图像加载扩展

扩展列表

1. SVGImages

下载和安装

功能概述

属性

方法

事件

2. PixzSVGImageLoader

下载和安装

功能概述

属性

方法

事件

使用示例

基础SVG加载 (SVGImages)

从网络加载SVG (SVGImages)

高级SVG操作 (PixzSVGImageLoader)

动态颜色修改

交互式SVG

SVG文件要求

标准SVG格式

推荐做法

文件路径示例

性能优化建议

常见应用场景

1. 图标系统

2. 数据可视化

3. 游戏和动画

4. 自定义UI组件

故障排除

常见问题

兼容性说明

开发资源

SVG设计工具

在线SVG资源

技术文档

您的改进建议

联系方式：

意见反馈（300字以内）：

App Inventor 2 中文网