svg 订阅
可缩放矢量图形(Scalable Vector Graphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。 [1] 展开全文
可缩放矢量图形(Scalable Vector Graphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。 [1]
信息
简    称
SVG
本    质
二维矢量图形标准
中文名
可缩放矢量图形
外文名
Scalable Vector Graphics
SVG简介
SVG是一种开放标准的矢量图形语言,可设计激动人心的、高分辨率的Web图形页面,因为软件提供了制作复杂元素的工具,如渐变、嵌人字体、透明效果、动画和滤镜效果并且可使用平常的字体命令插人到HTML编码中。2000年8月2日,W3C最终发布了SVG候选推荐标准,并希望开发者尽早开始实施SVG。2000年年底SVG推荐标准制定完毕。SVG是一种新型的矢量图形标准,同时它也是一种矢量图形描述的一种标准的语言,这种语言具有非常强的开放性,所以其在应用的过程中主要的对象是网络。SVG在应用的过程中可以适应三种三种形式的图像对象,各种图像对象都可以在实际的工作中对对象进行全面的组合和处理,同时还能按照实际的需要更改其自身的形式,将其定义成预处理的对象。 [2] 
收起全文
精华内容
参与话题
问答
  • SVG

    2018-07-08 22:35:56
    SVG 代码写在SVG标签中 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。svg预定义元素:矩形 <rect>圆形 ...

        SVG 代码写在SVG标签中 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

    svg预定义元素:

    • 矩形 <rect>
    • 圆形 <circle>
    • 椭圆 <ellipse>
    • 线 <line>
    • 折线 <polyline>
    • 多边形 <polygon>
    • 路径 <path>
    • 文字 <text>

    元素属性:

    展开全文
  • svg

    2013-06-14 17:04:26
    1、svg属于xml语言,所以或者 2、 No layer! There are no “layers” in SVG, and no real concept of depth. SVG does not support CSS’s z-index property, so shapes can only be arranged within the ...

    1、svg属于xml语言,所以<svg></svg>或者<svg     />

    2、 No layer!

    There are no “layers” in SVG, and no real concept of depth. SVG does not support CSS’s z-index property, so shapes can only be arranged within the two-dimensional x/y plane.

    And yet, if we draw multiple shapes, they overlap:

    <rect x="0" y="0" width="30" height="30" fill="purple"/>
    <rect x="20" y="5" width="30" height="30" fill="blue"/>
    <rect x="40" y="10" width="30" height="30" fill="green"/>
    <rect x="60" y="15" width="30" height="30" fill="yellow"/>
    <rect x="80" y="20" width="30" height="30" fill="red"/>

    The order in which elements are coded determines their depth order. The purple square appears first in the code, so it is rendered first. Then, the blue square is rendered “on top” of the purple one, then the green square on top of that, and so on.

    Think of SVG shapes as being rendered like paint on a canvas. The pixel-paint that is applied later obscures any earlier paint, and thus appears to be “in front.”

    简单地说svg没法设定显示优先级,所以一定要把最重要的代码,写在最后面,以防止被覆盖1
    展开全文
  • 走入SVG

    2018-07-20 15:33:38
    SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium 在2000年8月制定的一种新的二维矢量图形格式,也是规范中...
  • 中国省份地图 svg格式

    热门讨论 2012-11-07 13:16:38
    中国svg地图 只具体到省。 svg格式: SVG格式 SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象:矢量图形(vectorgraphicshape例如:由直线和曲线组成的路径)、图象(image)...
  • 很经典的SVG编辑器

    千次下载 热门讨论 2007-06-13 14:42:39
    SVGDeveloper是一款功能强大的SVG编辑软件,利用功能强大的绘制功能,你可以绘制诸如圆形、矩形、星形等基本形状,也可以绘制文本、图像和自由曲线等复杂图形。同时,SVGDeveloper还提供了其他一些高级功能使得你...
  • vue 导入 iconfont 中的 svg 图标

    万次阅读 2019-10-25 17:25:50
    实是做了一个svg的集合,与另外两种相比具有如下特点: - 支持多色图标了,不再受单色限制。 - 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持 ie9+,及现代浏览器。 - ...

    博客地址:http://www.globm.top/blog/1/detail/42
    symbol引用

    这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其
    实是做了一个svg的集合,与另外两种相比具有如下特点:

    • 支持多色图标了,不再受单色限制。
    • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持 ie9+,及现代浏览器。
    • 浏览器渲染svg的性能一般,还不如png。

    使用

    • 打开iconfont,找到我的项目,点击 批量操作-全选-批量去色在这里插入图片描述
    • 选择Symbol,打开链接下载js文件在这里插入图片描述
    • 将下载的js文件保存在assects静态文件中,并在main.js引入
    //main.js
    import '@/assets/js/font_symbol.js'
    
    • 新建svgIcon.vue,将svg的导入封装起来
    //svgIcon.vue
    <template>
        <svg :class="svgClass" aria-hidden="true">
            <use :xlink:href="iconName"/>
        </svg>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props: {
        iconClass: {
          type: String,
          required: true
        },
        className: {
          type: String,
          default: ''
        }
      },
      computed: {
        iconName () {
          return `#${this.iconClass}`
        },
        svgClass () {
          if (this.className) {
            return 'svg-icon ' + this.className
          } else {
            return 'svg-icon'
          }
        }
      }
    }
    </script>
    
    <style scoped>
        .svg-icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    
    
    • 新建svg-icon.js全局注册,并导入main.js
    //svg-icon.js
    import Vue from 'vue'
    import SvgIcon from '@/common/SvgIcon.vue' // svg组件
    
    Vue.component('svg-icon', SvgIcon)// 全局注册
    
    
    //main.js
    import '@/assets/js/svg-icon.js'
    
    • ok,写到这里就大功告成了,可以在页面中直接通过标签对来调用了
    <svg-icon icon-class="icon图标名称" />
    
    • 最后,我看到网上有很多导入svg的方法,需要在vue.config.js中进行配置,这是针对那些需要直接在项目中导入svg图标的,如果你只是单纯使用iconfont的话就没必要配置了,话不多说,顺便把配置也贴一下吧
    //vue.config.js
    //svg-icon
            // svg loader
        chainWebpack: config => {
            const svgRule = config.module.rule('svg') // 找到svg-loader
            svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后
            svgRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
            svgRule // 添加svg新的loader处理
                .test(/\.svg$/)
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({
                    symbolId: 'icon-[name]'
                });
            // 修改images loader 添加svg处理
            const imagesRule = config.module.rule('images');
            imagesRule.exclude.add(resolve('src/icons'));
            config.module
                .rule('images')
                .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        }
    
    展开全文
  • SVG 50个实例 SVG实例

    千次下载 热门讨论 2008-04-30 13:38:50
    50个左右SVG sample,是我学习SVG时候的留下的痕迹,初学者也许可以从中学到一些东西。 50个左右SVG sample,是我学习SVG时候的留下的痕迹,初学者也许可以从中学到一些东西。
  • SVG中国地图 SVG画的中国地图

    千次下载 热门讨论 2008-04-30 13:25:05
    SVG中国地图,矢量地图,用SVG Alayer手绘的。 本来是用来做天气预报的,用Ajax动态读取数据库然后通过SVG显示,大家最好把它加压的IIS根目录下,只有通过IP地址浏览时 才能看到动态效果,如果直接打开SVG文件 只能...
  • svg查看器svg查看器

    热门讨论 2010-10-01 22:26:26
    svg基本是在网页中查看的,如果大量的svg用网页查看起来很不方便。 软件功能:选择目录后,自动显示此目录以及所有的子目录中的svg图片,点击图片可获得相应图片的信息。
  • svg标签报两条警告 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See ...
  • SVG编辑器-SVG Alayer

    热门讨论 2007-10-01 15:38:38
    非常好用的SVG编辑器,同时也是学习SVG的好实例。 大家打开后直接打开SVG_Alayer.html文件,就可以绘图了,然后保存一下,你绘制的SVG图形就会保存到桌面上了。大家可以看说明文件了解详细信息。

空空如也

1 2 3 4 5 ... 20
收藏数 48,902
精华内容 19,560
关键字:

svg