Android 中使用svg图片

1. svg认识

  SVG:android5.0+出现,w3c推出
    使用xml 描述二维图形语言,矢量图,放大缩小无影响
 为什么用svg,现在手机的短板是内存,不是cpu,svg通过cpu计算,png占用内存
    Android上对svg进行阉割,使用Vector Drawable对svg支持,svg小

2. svg语法: 

 Vector 语法简介,如何看懂一张svg
            (1)Path指令解析如下所示:
                M = moveto(M X,Y) :将画笔移动到指定的坐标位置,相当于 android Path 里的moveTo()
                L = lineto(L X,Y) :画直线到指定的坐标位置,相当于 android Path 里的lineTo()
                H = horizontal lineto(H X):画水平线到指定的X坐标位置 
                V = vertical lineto(V Y):画垂直线到指定的Y坐标位置 
                C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
                S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线,更平滑 
                Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线 
                T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射 同样二次贝塞尔曲线,更平滑 
                A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线 ,相当于arcTo()
                Z = closepath():关闭路径(会自动绘制链接起点和终点)

                注意,’M’处理时,只是移动了画笔, 没有画任何东西。

用notepad++打开一张svg图片:

              <path style="fill:#F2484B;" d="M115.528,421.736c25.394-30.139,39.715-68.501,39.715-109.236
        c0-53.923-25.081-103.697-67.743-135.727v271.453c9.942-7.464,18.916-15.903,26.853-25.123
        C114.693,422.592,115.091,422.138,115.528,421.736z"/>

根据上面语法的去识别:
    fill:填充
 M: 移动到 坐标115.528,421.736
 c:三次贝塞尔曲线 

 svg在线编辑网站:
  https://editor.method.ac/ 
  svg转化为 Vector Drawable网站, 放到Drawable下
  http://svg.zhangningning.com.cn/
  Android中如何使用SVG:

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/method_draw_image"/>

直接当做普通图片使用即可,对于svg图片
  使用AndroidStudio创建svg:
  drawable->Vector Assert

3.svg动画:

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用SVG的<image>元素来插入图片SVG的<rect>元素。具体的步骤如下: 1. 首先,确保你有一个SVG文件,其包含了一个<rect>元素。你可以使用任何文本编辑器打开SVG文件。 2. 在<rect>元素的内部,添加一个<image>元素。例如:<rect>元素的结构如下: <rect x="50" y="50" width="200" height="200"> <image xlink:href="your-image-path.jpg" x="50" y="50" width="200" height="200" /> </rect> 在<image>元素使用xlink:href属性来指定你要插入的图片的路径。确保你提供正确的图片路径,并将其替换为"your-image-path.jpg"。 3. 调整<rect>元素和<image>元素的坐标和尺寸,以使图片适应矩形区域。你可以使用x、y、width和height属性来设置矩形的位置和大小,以及图片的位置和大小。 4. 保存SVG文件并在浏览器打开,你应该能够看到插入的图片在矩形区域内显示出来了。 通过上述步骤,你就可以将图片插入到SVG的<rect>元素了。请注意,这里的示例仅仅是一个简单的示例,你可以根据你的具体需求来调整矩形和图片的位置和大小。<span class="em">1</span> #### 引用[.reference_title] - *1* [Android 使用svg图片](https://download.csdn.net/download/weixin_38548434/14878728)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值