程序化光栅图像转换向量图形

写由密尔拉 5月29-2019 7min读取

SVG格式已永久化,但直到最近使用率一直相对较低开发者重新发现SVG, 并利用它的长处包括:

极轻度,特别是大图像维
象素性可扩展性使它理想化响应设计.
代码编辑SVG代码
可搜索引擎和无障碍屏幕阅读器

对许多网络设计师而言,SVG是自选方法,用于创建和提供标识、图标、字体、图形、信息图解和其他简单图象SVG创建需要一定技能水平和SVG创建工具经验

光栅图像转换向量图形有若干方法工具,例如AdobeIllustrator、AdobePhotoshop、Canva、向量器AI和Autoracer等,这些方法工具各有步骤和特征集,但往往需要更多实践努力和图形设计专门知识举例说 AdobeIllstrator要求详细调整,如色复杂性、像素和边缘相形之下,Photoshop包含多步进程,包括阈值层和色域命令的使用

反之,云形法提供更精简自动化方法,使其更高效选择,特别是对于那些可能不具备广度图形设计技能或无法访问复杂软件者而言。

云化长期支持变换服务SVG资产向量化效果.网络开发商和设计师能够利用SVG,即使他们需要用简单光栅图形、PNGs或甚至图片数据,而不需要深入知识或特殊工具生成矢量图形

新建算法化变换选项接受光栅图像sVG即时返回并准备交付获取并检测源图像路径与区域并转换成 sVG向量表提供各种选项帮助生成多或少细节SVG

深入研究新功能开通的一些使用选项

向量登录图标

假设你访问标志、图标或其他图形,以光栅形式出现(或许可PNG),但想缩放或以更紧凑的形式交付求SVG版本尽可能近似原创

比较而言,AdobeIlustrator和Photoshop等工具虽然强势,但对任务可能比较麻烦需要详细人工调整和深入理解传送过程,这可能耗时。连在线工具如Canva或Auttracer都提供简单接口,缺乏高质量自动化向量化所需的精度和灵活性,特别是在处理复杂图像或需要精确控制最终输出时。

假设我们只有256px版本下图

位小PNG28KB.

万一我们想大显示图像呢不幸的是模糊度和文件大小光栅图形都持续增加分辨率举个例子,如果我们想显示4x原创尺寸的图像, 文件尺寸会长到远不友好337KB质量会大幅下降并会高度分解

<\/Image>","codeSnippet":" \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('docs\/racoon.png', {width: \"4.0\", crop: \"scale\"}).toHtml();","codeSnippet":"cloudinary.imageTag('docs\/racoon.png', {width: \"4.0\", crop: \"scale\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"docs\/racoon.png\").image(width=\"4.0\", crop=\"scale\")","codeSnippet":"CloudinaryImage(\"docs\/racoon.png\").image(width=\"4.0\", crop=\"scale\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('docs\/racoon.png'))\n\t->resize(Resize::scale()->width(4.0));","codeSnippet":"(new ImageTag('docs\/racoon.png'))\n\t->resize(Resize::scale()->width(4.0));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"docs\/racoon.png\", array(\"width\"=>\"4.0\", \"crop\"=>\"scale\"))","codeSnippet":"cl_image_tag(\"docs\/racoon.png\", array(\"width\"=>\"4.0\", \"crop\"=>\"scale\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(4.0).crop(\"scale\")).imageTag(\"docs\/racoon.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(4.0).crop(\"scale\")).imageTag(\"docs\/racoon.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"docs\/racoon.png\", :width=>4.0, :crop=>\"scale\")","codeSnippet":"cl_image_tag(\"docs\/racoon.png\", :width=>4.0, :crop=>\"scale\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(4.0).Crop(\"scale\")).BuildImageTag(\"docs\/racoon.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(4.0).Crop(\"scale\")).BuildImageTag(\"docs\/racoon.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.resize(Resize.scale().width('4.0')));","codeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.resize(Resize.scale().width('4.0')));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(4.0).setCrop(\"scale\")).generate(\"docs\/racoon.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(4.0).setCrop(\"scale\")).generate(\"docs\/racoon.png\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(4.0).crop(\"scale\")).generate(\"docs\/racoon.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(4.0).crop(\"scale\")).generate(\"docs\/racoon.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.resize(Resize.scale().width('4.0')));","codeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.resize(Resize.scale().width('4.0')));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/racoon.png\")\n\t resize(Resize.scale() { width(4.0F) }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/racoon.png\")\n\t resize(Resize.scale() { width(4.0F) }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"docs\/racoon.png\", {width: \"4.0\", crop: \"scale\"})","codeSnippet":"$.cloudinary.image(\"docs\/racoon.png\", {width: \"4.0\", crop: \"scale\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").resize(scale().width(\"4.0\"));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_4.0\/docs\/racoon.png","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"4.0"}],"transformation_string":"w_4.0","url_suffix":"","version":null,"secure":true,"public_id":"docs\/racoon.png","extension":"png","format":"png","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

万一我们把它转换成SVG呢

带新云向量化效果,我们可以做光栅图像向量瞬间转换即时转换比AdobePhotoshop或Illutra

云性解析方法不仅速度更快,而且还保持对原创图像高度忠诚性,确保矢量化结果保留原创设计精髓

上文提到,向量化特征作品,追踪并检测源图像路径和面积,并转换成SVG矢量表要做到这一点,它必须执行某些近似值,所以结果通常不是源完全的“无损”拷贝,但取决于源信息,它可以非常接近

多选项可指定向量化效果,视目标而定,可使用这些选项控制结果输出

sVG最大细节(1.0)加3色(像原型一样)。我们不希望角太粗糙, 但也不要太软, 所以我们会使用中间值40角形选项。产生极紧凑8KB文件提供像素完美缩放至任意大小

<\/Image>","codeSnippet":" \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('docs\/racoon.png', {effect: \"vectorize:detail:1.0:corners:40:colors:3\"}).toHtml();","codeSnippet":"cloudinary.imageTag('docs\/racoon.png', {effect: \"vectorize:detail:1.0:corners:40:colors:3\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"docs\/racoon.png\").image(effect=\"vectorize:detail:1.0:corners:40:colors:3\")","codeSnippet":"CloudinaryImage(\"docs\/racoon.png\").image(effect=\"vectorize:detail:1.0:corners:40:colors:3\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('docs\/racoon.png'))\n\t->effect(Effect::vectorize()->numOfColors(3)\n->detailsLevel(1.0)\n->cornersLevel(40));","codeSnippet":"(new ImageTag('docs\/racoon.png'))\n\t->effect(Effect::vectorize()->numOfColors(3)\n->detailsLevel(1.0)\n->cornersLevel(40));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"docs\/racoon.png\", array(\"effect\"=>\"vectorize:detail:1.0:corners:40:colors:3\"))","codeSnippet":"cl_image_tag(\"docs\/racoon.png\", array(\"effect\"=>\"vectorize:detail:1.0:corners:40:colors:3\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().effect(\"vectorize:detail:1.0:corners:40:colors:3\")).imageTag(\"docs\/racoon.png\");","codeSnippet":"cloudinary.url().transformation(new Transformation().effect(\"vectorize:detail:1.0:corners:40:colors:3\")).imageTag(\"docs\/racoon.png\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"docs\/racoon.png\", :effect=>\"vectorize:detail:1.0:corners:40:colors:3\")","codeSnippet":"cl_image_tag(\"docs\/racoon.png\", :effect=>\"vectorize:detail:1.0:corners:40:colors:3\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\"vectorize:detail:1.0:corners:40:colors:3\")).BuildImageTag(\"docs\/racoon.png\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\"vectorize:detail:1.0:corners:40:colors:3\")).BuildImageTag(\"docs\/racoon.png\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.effect(Effect.vectorize().numOfColors(3)\n.detailsLevel('1.0')\n.cornersLevel(40)));","codeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.effect(Effect.vectorize().numOfColors(3)\n.detailsLevel('1.0')\n.cornersLevel(40)));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\"vectorize:detail:1.0:corners:40:colors:3\")).generate(\"docs\/racoon.png\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\"vectorize:detail:1.0:corners:40:colors:3\")).generate(\"docs\/racoon.png\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().effect(\"vectorize:detail:1.0:corners:40:colors:3\")).generate(\"docs\/racoon.png\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().effect(\"vectorize:detail:1.0:corners:40:colors:3\")).generate(\"docs\/racoon.png\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.effect(Effect.vectorize().numOfColors(3)\n.detailsLevel('1.0')\n.cornersLevel(40)));","codeSnippet":"cloudinary.image('docs\/racoon.png').transformation(Transformation()\n\t.effect(Effect.vectorize().numOfColors(3)\n.detailsLevel('1.0')\n.cornersLevel(40)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/racoon.png\")\n\t effect(Effect.vectorize() { numOfColors(3)\n detailsLevel(1.0F)\n cornersLevel(40) }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/racoon.png\")\n\t effect(Effect.vectorize() { numOfColors(3)\n detailsLevel(1.0F)\n cornersLevel(40) }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"docs\/racoon.png\", {effect: \"vectorize:detail:1.0:corners:40:colors:3\"})","codeSnippet":"$.cloudinary.image(\"docs\/racoon.png\", {effect: \"vectorize:detail:1.0:corners:40:colors:3\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","codeSnippet":"new CloudinaryImage(\"docs\/racoon.png\").effect(\n vectorize().numOfColors(3).detailsLevel(\"1.0\").cornersLevel(40)\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/e_vectorize:detail:1.0:corners:40:colors:3\/docs\/racoon.png","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"effect":"vectorize:detail:1.0:corners:40:colors:3"}],"transformation_string":"e_vectorize:detail:1.0:corners:40:colors:3","url_suffix":"","version":null,"secure":true,"public_id":"docs\/racoon.png","extension":"png","format":"png","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

相对简单案例它只有几色,所以它真正带出拥有矢量版值

记住当选择精确细节 SVG时颜色渐变或原型中多色都无效最优结果以有限数固态颜色实现

生成酷、紧凑图像占位器

提供高质量照片时,网络设计实践是先交付低质量图像占位器(LQIPs),其尺寸非常紧凑,并快速加载云化支持各种压缩方法,有可能用于生成占位符你可以读更多关于那些来.

SVG占位符有几大长处

相当紧凑
提供令人愉快的结果并传递最终图像内容
SVGs可直接嵌入HTML并不必等待avaScript加载

贝斯特2200娱乐Canva或向量器AI等其他平台也可以创建 sVG占位器,但它们往往缺少高级优化定制选项云形方法确保占位器不单紧凑性,而且还保持视觉忠诚性,而视觉忠诚性往往因简单向量化工具而丢失。

下潜举个例子

2大像素版狮子图片卡普里23aut华府市752KB假设我们利用云情f_aut并q_aut优化化处理400KB全分辨率图像近50%原创,但仍相当大

sVGLQIP安装时懒惰加载全尺寸图像会更好

我们希望占位符代表原创主题但也非常紧凑归结为5色和细节水平10%产生一美图像,但仍大到不适合置牌者

<\/Image>","codeSnippet":" \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('docs\/lion.svg', {quality: \"auto\", fetchFormat: \"auto\"}).toHtml();","codeSnippet":"cloudinary.imageTag('docs\/lion.svg', {quality: \"auto\", fetchFormat: \"auto\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"docs\/lion.svg\").image(quality=\"auto\", fetch_format=\"auto\")","codeSnippet":"CloudinaryImage(\"docs\/lion.svg\").image(quality=\"auto\", fetch_format=\"auto\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('docs\/lion.svg'))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","codeSnippet":"(new ImageTag('docs\/lion.svg'))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"docs\/lion.svg\", array(\"quality\"=>\"auto\", \"fetch_format\"=>\"auto\"))","codeSnippet":"cl_image_tag(\"docs\/lion.svg\", array(\"quality\"=>\"auto\", \"fetch_format\"=>\"auto\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).imageTag(\"docs\/lion.svg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).imageTag(\"docs\/lion.svg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"docs\/lion.svg\", :quality=>\"auto\", :fetch_format=>:auto)","codeSnippet":"cl_image_tag(\"docs\/lion.svg\", :quality=>\"auto\", :fetch_format=>:auto)","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\").FetchFormat(\"auto\")).BuildImageTag(\"docs\/lion.svg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\"auto\").FetchFormat(\"auto\")).BuildImageTag(\"docs\/lion.svg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('docs\/lion.svg').transformation(Transformation()\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('docs\/lion.svg').transformation(Transformation()\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"auto\").setFetchFormat(\"auto\")).generate(\"docs\/lion.svg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\"auto\").setFetchFormat(\"auto\")).generate(\"docs\/lion.svg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).generate(\"docs\/lion.svg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().quality(\"auto\").fetchFormat(\"auto\")).generate(\"docs\/lion.svg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('docs\/lion.svg').transformation(Transformation()\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","codeSnippet":"cloudinary.image('docs\/lion.svg').transformation(Transformation()\n\t.delivery(Delivery.format(\n\tFormat.auto()))\n\t.delivery(Delivery.quality(\n\tQuality.auto())));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/lion.svg\")\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"docs\/lion.svg\")\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto())) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"docs\/lion.svg\", {quality: \"auto\", fetch_format: \"auto\"})","codeSnippet":"$.cloudinary.image(\"docs\/lion.svg\", {quality: \"auto\", fetch_format: \"auto\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","codeSnippet":"new CloudinaryImage(\"docs\/lion.svg\")\n .delivery(format(auto()))\n .delivery(quality(auto()));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/f_auto,q_auto\/docs\/lion.svg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"format":"auto","quality":"auto"}],"transformation_string":"f_auto,q_auto","url_suffix":"","version":null,"secure":true,"public_id":"docs\/lion.svg","extension":"svg","format":"svg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

仅留下2色并转到5%细节级产生的结果仍易识别,但小得多(约小于5%)。6kb)或多做几处调整,这仍能提供像原创图像,但现在你数文件大小字节脱机

6KBLQIP

~1KBLQIP

向量化为艺术特效

上例中已经可以看到,向量化的产物使我们能够捕捉主形状和对象组成图片或绘图并产生优美效果这可能是我们想向用户提供的东西简单应用作为效果在这些情况中,我们不一定想交付SVG和任何其他云化变换一样,你可以以任何格式交付传送图像,只需具体说明相关扩展

举例说假设你的用户之一上传简单自拍图像可提供按钮让他们将照片转换为矢量图像

原创性

默认向量化效果

默认值算法化参数会压缩到300像素和10色的详细级,这对图像来说就足够了。

检验另一图像可能需要更多颜色,但少细节面向此图像,我们可交付使用e_vectorize:colors:20:detail:0.1

原创性

多色少细节

自定义向量效果

如前所述,向量化效果可用几种方式控制,允许不同结果语法如下:

vectorize:[detail]:[colors]:[despeckle]:[paths]:[corners]

细节详解可提供相对值(0-1.0)或绝对像素数相对细节可能比较直观,但如果你想对多图像应用相同的变换,而多图像可能有不同的源解析度,绝对像素值将为图像提供更加一致的结果
颜色学表示生成图像使用多色数(最多30色),但显然你选择的颜色数(如果少于原型)也会影响最终细节水平
剩余选项允许您进一步微调结果
详细细节见向量化效果图像变换引用

下方可以看到各种使用这些选项的潜在输出左上角图像原创图片随波可见矢量图形输出为JPG,详细度、色度、淡化程度不等等