SVG格式一直存在，但直到最近，使用率仍然相对较低。但是，随着浏览器支持的改进，开发人员正在重新发现SVG，并利用其优点，包括：非常轻量化，特别是对于大图像尺寸。像素完美的可扩展性使其成为响应性设计的理想之选。仅代码编辑。SVG是代码。可由搜索引擎和无障碍屏幕阅读器搜索。对于许多web设计师来说，SVG是在他们的网站中创建和交付徽标、图标、字体、图形、信息图形和其他简单图像的一种常用方法。但一般来说，SVG的创建需要一定的技能水平和使用SVG创建工具的经验。Cloudinary长期以来一直支持SVG资产的转换和服务，但现在Cloudinary通过提供简单的矢量化效果更进一步。这使得web开发人员和设计人员能够利用SVG，即使他们必须处理的图像是简单的光栅图形、png甚至是照片数据，而且不需要深入的知识或生成矢量图形的特殊工具。newe_vectorizetransformation选项接受一个光栅图像，并实时返回一个SVG并准备好交付。。它通过跟踪和检测源图像中的路径和区域并将它们转换为SVG矢量形式来实现这种"魔力"。它提供了多种选项，使您能够根据您的目标生成更多或更少细节的svg。让我们仔细看看这些新功能提供的一些使用选项。将徽标和图标矢量化假设您可以访问光栅形式的徽标、图标或其他图形（可能是PNG），但希望缩放它们或以更紧凑的形式交付它们。对于这个用例，我们希望SVG版本尽可能与原始版本匹配。假设我们只能访问以下绘图的256px版本：这是一个相对较小的28kb的PNG。但是如果我们想以更大的尺寸显示图像呢？不幸的是，光栅图形的模糊度和文件大小都随着分辨率的增加而不断增加。例如，如果我们想以原始大小的4倍显示此图像，文件大小将增长到不太友好的337 KB，而质量会显著下降，并且它也会高度像素化。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_4.0/docs/racoon.pngRuby：复制到剪贴板cl\u image_tag（"文档/浣熊.png"，：width=>4.0，：crop=>"缩放"）PHP:复制到剪贴板cl\u image_tag（"文档/浣熊.png"，数组（"width"=>4.0，"crop"=>"scale"））Python:复制到剪贴板CloudinaryImage（"文档/浣熊.png"）.image（width=4.0，crop="缩放"）节点.js：复制到剪贴板cloudinary.image（"文件/浣熊.png，{width:"4.0"，裁剪："scale"}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.width（4.0）.crop（"scale"））.imageTag（"文档/浣熊.png");JS:复制到剪贴板cloudinary.imageTag（"文件/浣熊.png'，{width:"4.0"，裁剪："scale"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"文件/浣熊.png，{width:"4.0"，裁剪："scale"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Width（4.0）.Crop（"scale"））.BuildImageTag（"文档/浣熊.png")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.width（4.0）.crop（"scale"））.generate（"文档/浣熊.png");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setWidth（4.0）.setCrop（"scale"））.generate（"文档/浣熊.png")!，cloudinary:云数据库）但是如果我们把它变成SVG呢？利用新的云矢量化效果，我们可以实时地进行光栅图像到矢量的转换。如前所述，矢量化特性的工作原理是跟踪和检测源图像中的路径和区域，然后将它们转换为SVG矢量形式。要做到这一点，它必须执行一些近似，因此结果通常不是源的完全"无损"拷贝，但是根据源信息，它可以非常接近。可以为矢量化效果指定几个选项，您可以使用这些选项来控制结果输出，具体取决于您的目标。对于本例，我们将请求一个最大细节（1.0）的SVG，颜色为3种（与原始版本一样）。我们不希望角点太粗糙，但也不要太软，因此我们将使用中间值40作为角点选项。这将产生一个非常紧凑的8kb文件，将提供像素完美的缩放到任何大小。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/e_矢量化:详图：1.0:40角:颜色：3/docs/racoon.pngRuby：复制到剪贴板cl\u image_tag（"文档/浣熊.png"，：effect=>"矢量化：细节：1.0：转角：40:颜色：3")PHP:复制到剪贴板cl\u image_tag（"文档/浣熊.png，数组（"效果"=>"矢量化：细节：1.0：转角：40:颜色：3"))Python:复制到剪贴板CloudinaryImage（"文档/浣熊.png"）。图像（效果="矢量化：细节：1.0：转角：40:颜色：3")节点.js：复制到剪贴板cloudinary.image（"文件/浣熊.png"，{效果："矢量化：细节：1.0：转角：40:颜色：3"})Java:复制到剪贴板cloudinary.url（）。转换（新转换（）。效果（""矢量化：细节：1.0：转角：40:颜色：3）。imageTag（"文档/浣熊.png");JS:复制到剪贴板cloudinary.imageTag（"文件/浣熊.png'，{效果：矢量化：细节：1.0：转角：40:颜色：3"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"文件/浣熊.png"，{效果："矢量化：细节：1.0：转角：40:颜色：3"})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Effect（"矢量化：细节：1.0：转角：40:颜色：3）。BuildImageTag（"文档/浣熊.png")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.effect（）矢量化：细节：1.0：转角：40:颜色：3）生成（"文档/浣熊.png");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setEffect（"矢量化：细节：1.0：转角：40:颜色：3）生成（"文档/浣熊.png")!，cloudinary:云数据库）这是一个相对简单的案例。它只有几个颜色，所以它真正体现了向量版本的价值。请记住，当您要在生成的SVG中获得非常精确的细节时，原始SVG中的颜色渐变或大量颜色都不起作用。用有限数量的固体可获得最佳结果颜色。生成酷，紧凑的图像占位符当交付高质量的照片时，最好先提供尺寸非常紧凑、加载速度极快的低质量图像占位符（LQIP）。Cloudinary支持多种可能用于生成占位符的压缩。你可以在这里多读一些。但是使用SVG占位符有几个优点：它们相当紧凑。它们提供了令人愉快的结果，也传达了最终图像的内容。svg可以直接嵌入到HTML中，不需要等待JavaScript加载。让我们用一个示例：2Capri23auto提供的这张lion图像的百万像素版本是752 KB，但是假设我们利用Cloudinary的f帴auto和q帴auto优化，我们将处理大约400KB的全分辨率图像，这几乎是原始图像的50%，但还是很漂亮大的。所以SVG将是一个懒洋洋的地方，而它将在一个完整的地方加载图像。我们希望占位符能代表原稿的主题，但也要非常紧凑。将我们自己限制在5种颜色和10%的细节级别可以产生一个很好的图像，但是对于placeholder.urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/f帴auto，自动/文件/狮子座：复制到剪贴板cl\u image_tag（"文档/狮子.svg"，：quality=>"auto"，：fetch_format=>：auto）PHP:复制到剪贴板cl\u image_tag（"文档/狮子.svg，数组（"质量"=>"自动"，"获取格式"=>"自动"）Python:复制到剪贴板CloudinaryImage（"文档/狮子.svg）.image（quality="auto"，fetch_format="auto"）节点.js：复制到剪贴板cloudinary.image（"文件/狮子.svg"，{quality:"auto"，fetch_format:"auto"}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.quality（"auto"）.fetchFormat（"auto"））.imageTag（"docs"）/狮子.svg");JS:复制到剪贴板cloudinary.imageTag（"文件/狮子.svg'，{quality:"auto"，fetchFormat:"auto"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"文件/狮子.svg"，{quality:"auto"，fetch_format:"auto"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Quality（"auto"）.FetchFormat（"auto"））.BuildImageTag（"文档/狮子.svg")安卓：C