Google 极力推动 Web 矢量图技术

Web工控矢量图编辑器 多比的编辑器是使用Extjs编写的,所有的代码在duobee/duobee-ext-editor.js中,如果你熟悉extjs, 你很容易理解编辑器的原理, 如果你不熟悉extjs, 建议你先熟悉一下extjs,因为他现在已经是企业级应用界面的主流了。   由于编辑器的页面比较多,下面我们以应用为导向,介绍一下经常要修改设计器的需求如何满足。 改变图元面板   在 阅读详情

至少在10年前,人们就建议对 Web 图形技术进行改造,而 Google 认为,现在已经是时候了。Google 上周五主持召开了 SVG Open 2009 大会,讨论有关 SVG (Scalable Vector Graphics (SVG) ) Web 图形标准的问题。随着众多浏览器厂商以及 Web 开发者对 SVG 的支持,这种可用于 Web 的矢量图形标准很有可能在最近几年成为主流。

正如 Google 的开发工程师 Brad Neuberg 在大会中所言,新的编程标准虽说很难形成,但它们确实来了,他说,一开始它们被忽视,接着被炒作,接着被宣布死亡,最后发现,它们是真正能解决问题的技术。

Bitmap images, such as this part of Wikipedia's logo, don't scale gracefully to different sizes.

点阵图,放大后会变虚

SVG lets this Wikipedia logo be shown as many pixels wide as you'd like.

SVG 让图形任意发达而保持质量不变

矢量图使用直线,曲线,几何图形,色彩值表述图形,而 JPG,GIF 一类的点阵图使用点阵描述图形,前者拥有更小的文件尺寸,不变的缩放质量,比如,我们可以看一下 SVG 版的 Wikipedia 标志 ,即使放大到整页大小,质量也不下降。

然而 SVG 仍未广泛进入 Web 开发者的圈子,一方面,因为占据主导地位的浏览器 IE 仍不支持这种技术,Neuberg 认为,如果主流浏览器不支持,你就不敢轻易部署。

不过,Google 和它的同盟们正在改变这一现状,Chrome, Firefox, Safari, 以及 Opera 都支持 SVG,而鉴于微软是这次会议金牌赞助商,相信 IE 也将在这方面有所作为。

在一项 Web 开发者的调查 中,矢量图成为最受期待的功能,这让 Google 更有信心推出一款叫做 SVG Web 的软件,该软件旨在帮助那些不支持 SVG 的浏览器实现 SVG 支持。Neuberg 说, 对于那些支持 SVG 的浏览器, SVG Web 会将 SVG 渲染任务交给浏览器,对于不支持 SVG 的浏览器,则会生成一个 Flash 对象渲染 SVG 图形,虽然这种机制永远赶不上本地 SVG 的渲染速度,但可以很好地帮助 Web 开发者实现矢量图功能。

Google 计划在大会中展示他们同 Wikipedia 一起使用 SVG 技术的果实,具体的技术部署可能还需要一到两个月。

SVG 的一个问题是,它属于正在消亡的 XHTML Web 语言的一部分 ,然而,HTML 5 标准已经明确地将 SVG 放到一等公民的位置。

在 Web 浏览器中实现矢量图,还有另外一种技术,就是 HTML 5 的 Canvas。Neuberg 说,Canvas 最适合在屏幕上画图,而 SVG 最适合对矢量图进行处理,在 Adobe Flash 和 微软 Silverlight 中,SVG 和 Canvas 都被支持。

当然,如今矢量图领域最大的竞争者是 Adobe Flash,拥有大量的用户基础,而 Adobe 的 FXG 技术更是锦上添花,使 SVG 在 Flash 中得以实现。

Neuberg 表示,矢量图还有一个优势,它的描述语言可以被搜索引擎索引,和 HTML 一样,可以拥有链接地址,它是 Web 的一部分,可以和别的技术交互,它并不是一个被封锁在盒子中看不到的东西。

本文来源:http://news.cnet.com/8301-30685_3-10365636-264.html?tag=mncol;title
中文翻译来源:COMSHARP CMS 官方网站

基于web类似于 visio 的矢量图绘制 B/S 一个基于web开发的类似于 visio 的矢量图绘制软件的部分代码, B/S架构,用户不用安装客户端软件,就可以直接使用。 立即下载

相关推荐

银河麒麟V10ServerSP3中安装Nacos2.4.x详细教程

银河麒麟V10ServerSP3中安装Nacos2.4.x详细教程

yuanjinshenglife的专栏 1303

关于web矢量图SVG【新技术交流】

前一阵子听说IE9支持SVG了,我心里一凸,此乃大好消息啊,web上终于有了统一的矢量绘图标准! 你想想啊,在web页面上结合ajax就可以实时画图了,实时的!画任何你想到的图形,而且大小是可缩放的,你可以画地图,你可以画曲线,你可以画UI动画 。。。 但是我同时得到一个蛋疼的消息IE9不支持xp!!! 最近公司在做一套工业用门户系统,其中就大量用到SVG...

Java Web 实用技术分享 331

别再为批次效应发愁了!手把手教你用Harmony整合10x单细胞数据(附完整R代码)

本文详细介绍了如何使用Harmony工具消除单细胞数据中的批次效应,提供完整的R代码实现跨样本数据整合。通过模糊聚类和渐进校正技术,Harmony能有效区分技术噪音与真实生物信号,适用于大型数据集处理。文章包含质控要点、参数设置建议及常见问题解决方案,助力研究者获得高质量整合结果。

weixin_27215403的博客 197

从字体图标到svg——Web图标发展史以及iconfont矢量图标库的使用

要注意的是,这并没有在根本上改变 web 图标渲染的方式,底层依然是基于前文提到的各种方案。在浏览器中使用的是图形渲染,所以就是实实在在的路径。:icon-font 图标通过伪元素插入,依赖于 line-height , vertical-align,letter-spacing , word-spacing ,字体字形设计(它的四周有留白吗?范围内)并为其绘制字形,同时生成好一堆预定义的图标名 class name,通过 web font 的方式加载资源,通过对应的 class name 来引用图标。

m0_66584716的博客 2254

Windows批处理脚本实战:用Ping命令打造简易网络监控工具(附完整代码)

本文介绍如何利用Windows批处理脚本和Ping命令,快速构建一个轻量级、自动化的网络监控工具。该方案无需额外安装软件,通过周期性探测目标IP连通性,并将结果(成功、失败及延迟)自动记录到带时间戳的日志文件中,适合中小团队或临时监控需求,实现低成本、高效率的网络状态监控。

5f4d3s2a1q的博客 496

CESM2 实验笔记

文章目录1. 重新启动1.1 关于重启文件2. RUN_TYPE 初始化运行方式startupbranchhybrid3. branch 或者 hybrid运行的示例4. 其他声明5. 关于RESUBMIT 1. 重新启动 参考: https://bb.cgd.ucar.edu/cesm/threads/how-to-restart-cesm2-1-3-fhist-from-a-backup.5245/#post-36275 适用情况:模型运行因时间不足或其它原因中断,需要继续运行 方法1:将CONTIN

qq_38607066的博客 1万+

web画图技术(svg、canvas、fusioncharts、anychart)简介

一、前言        如题,此处主要讨论网页上实现画图的技术,像java的swing,.net的chart不在今天的讨论范围。 二、讲啥 •SVG简介 •主流的画图方式? •各方式之间的差异? 三、SVG 3.1 SVG简介   定义 ScalableVector Graphics,可伸缩矢量图形; 它是使用 XML 来描述二维图形和

daxiang的专栏 1万+

【CSP-J/S初赛知识点整理】

CSP-J/S初赛知识点整理

qq_43884946的博客 1万+

WebGL、canvas、svg

webGL是一种帮助我们开发3D网页的绘图技术,底层是JavaScript APIWebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果。

好好学习天天向上 1816

树莓派4B玩转ROS2 Humble:Ubuntu Desktop一键安装与配置教程

本文详细介绍了在树莓派4B上安装和配置ROS2 Humble的完整教程,包括硬件准备、Ubuntu Desktop系统安装、一键部署ROS2、网络配置优化以及常见问题解决方案。通过简化安装流程和性能调优技巧,帮助开发者快速搭建机器人开发环境,充分发挥树莓派4B在ROS2应用中的潜力。

w8x9y0z1的博客 969

shader多图叠加变换

shader Shader "Paint3D/AddTexture" { Properties { _MainTex ("Main Texture", 2D) = "white" {} _MainColor("Main Color", Color)=(1,1,1,1) _AddTex0 ("Texture0", 2D) = "white" {} _AddTex1 ("Texture1", 2D) = "white" {} .

李长江的博客 909

良哥汇总:WEB基于SVG图形绘制——手把手教你完成矢量示意图绘制

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。 SVG 是一种用于描述二维图形的 XML 标记语言,与位图图像不同,SVG图像以文本形式存储,并且可以缩放到任意大小而不会失真,因为它们基于数学描述而不是像素。 SVG 图形是可伸缩的,无需分辨率依赖,这意味着它们可以在不失真的情况下被放大或缩小。 SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。SVG 的主要特点 矢量图形:SVG 使用基于路径的矢量图形,这意味着图形可以无限放大而不失真。 可伸缩性:S

hualinger的博客 4197

点云生成图像

摘要:本文介绍了使用Open3D库将点云投影为RGBD图像的方法。通过project_to_rgbd_image函数,利用小孔相机模型的内参和外参矩阵,实现了点云到彩色图像和深度图的转换。实验使用随机生成的10万个点云数据,通过可视化窗口获取相机参数后,成功生成了对应的RGB图像和深度图像,并使用Matplotlib进行可视化展示。该方法为点云数据处理提供了有效的三维到二维投影方案。

夜空中明亮的星的专栏 134

阿里矢量图标

阿里矢量图标

hewoqukanhai的博客 399

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

前端可视化——SVG矢量图技术

SVG 1、SVG 是一种绘图技术,SVG 的全名叫可缩放矢量图形(Scalable Vector Graphics)。 2、SVG 使用 XML 格式定义图像。 3、可伸缩,不失真。 简单示例: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" s...

程序员老李|前阿里技术专家,10 年前端。 做免费办公工具:图片压缩、PDF、Markdown、在线简历,全在浏览器本地处理。 文件不上传,不用注册。技术栈 Canvas、WebAssembly、Web Worker。 8942

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

矢量图 web前端 后端

SVG矢量图格式 http://zh.wikipedia.org/wiki/可缩放矢量图形 能够设计SVG图形作品的软件工具包括Adobe Illustrator、Visio以及CorelDRAW等。 而开放源代码的软件有Scribus、Karbon14、Inkscape以及Sodipodi等。 另外也有开放源码、功能简单但容易操作、免安装的在线SVG设计工具,例如svg-...

伊苏 661

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

Web矢量图绘制 电力行业图

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34177064的博客 843

分享几款js矢量图类库

Raphael     一款轻量级的javascript插件,帮助你简单地绘制出web上的矢量图。通过它你能轻易地定制不同的图表、截图类和转动式的窗口部件。     前几天用它开发了一款进度条插件,首先上图(有图有真相嘛):         初始化时圆环和进度条都是动态的。     Raphael官网:http://raphaeljs.com/     Github地址:htt

wangshu696的专栏 5750

几种web矢量图形的简单性能比较(3)

canvas是htm5中新增的图形元素。网上反映不错。可惜IE还不支持。测试方案:IE_excanvas:canvas性能.html。由于IE8还不支持canvas,所以引入了google 的excanvas脚本。实现对canvas的透明封装。这个在IE上也是通过vml实现的。从结果看,比原生的vml要慢一倍左右。不过比rapheal要快不少。Opera+canvas:canvas

laputa73的专栏 3417

Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家Tim Berners-Lee首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点,但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果,不得已在页面中嵌入大量的 Flash。这...

weixin_33896069的博客 425

使用阿里巴巴矢量图iconfont以及webfont的步骤详解

一、使用阿里iconfont矢量图步骤 第一步,首先进入阿里巴巴矢量图标库首页(http://www.iconfont.cn) 第二步,将需要的图标添加入库 第三步,从购物车中下载代码 第四步,将下载完成的压缩包解压,将其中的文件放入到项目中某个文件夹下(当将文件放在某个文件夹下时,font-face中代码的url路径将会有一些改变,在这里假设放进了font文件夹),并将其中的de...

Wu ShanShan的博客 8351

Web 图片性能优化系列一:背景与基础

什么是响应式图片 组成网站的资源中,图片往往是网络负载的主要组成部分,占据了大部分负载而且随着时间推移,这个现象仍然会保持。虽然现在的网络连接速度持续改进,但是同样出现了越来越多的高 DPI 分辨率设备,为了在这些设备上有更好的表现,就需要有更高清晰度的图片,高清晰的同时就需要更大的文件大小。而因为仍需要支持一些相对非高 DPI 的分辨率...

weixin_33978044的博客 244

在web项目中导入阿里巴巴矢量图

首先在阿里巴巴矢量图库里面找到自己想要的图标 然后添加到购物车,它会让你添加到一个项目中 然后在我的项目中管理 点击查看在线链接 将这样的一段代码添加到自己所需图标的css文件中 @font-face { font-family: 'iconfont'; /* project id 524168 */ src: url('//at.alicdn.com/t/

yuehuafei的博客 4431

浏览器端图表渲染技术SVG, VML HTML Canvas

最近一直在研究浏览器端的图形图表绘制技术,从种类上可以分为两种: 一类是矢量图形绘制API,典型代表是微软的VML与W3C主推的SVG 另外一类是基于像素的绘制API,典型代表是HTML5 Canvas

关注微信公众号【OpenCV学堂】 8218
上一篇: Web 易用性大师 Jakob Nielsen 访谈录
下一篇: 浏览器20年图说简史
comsharp
博客等级 码龄20年 1475粉丝 41原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值