The vectorize effect takes a raster image and translates it to a scalable vector equivalent in the SVG format.
Presets and detailed options are available to control the level of detail and complexity of the translation.
Generate this effect by applying the e_vectorize transformation effect to your delivery URL.
For example:
LQIP – or "Low Quality Image Placeholder" a term used when displaying an extra skinny placeholder where the actual image is intended to be displayed, while waiting for the high-resolution image to be downloaded.
For this use-case, you would load a bunch of very low quality placeholders quickly, replacing them with the real image as the user scrolls. This way the page has the right proportions and colors, and loads quickly as the full image isn't used until needed. Using vectorize images is a good option for such placeholders.
Cartoon-like effect - making the image transition more fun, start with a 'blocky' version, as the details smooth out into shapes instead of raster data:
Original:
Ruby:
cl_image_tag("young_couple.jpg")
PHP v1:
cl_image_tag("young_couple.jpg")
PHP v2:
(new ImageTag('young_couple.jpg'));
Python:
CloudinaryImage("young_couple.jpg").image()
Node.js:
cloudinary.image("young_couple.jpg")
Java:
cloudinary.url().imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg').toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg")
React:
<Image publicId="young_couple.jpg" >
</Image>
Vue.js:
<cld-image publicId="young_couple.jpg" >
</cld-image>
Angular:
<cl-image public-id="young_couple.jpg" >
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("young_couple.jpg")!, cloudinary: cloudinary)
Transformed:
Ruby:
cl_image_tag("young_couple.jpg", :effect=>"vectorize")
PHP v1:
cl_image_tag("young_couple.jpg", array("effect"=>"vectorize"))
PHP v2:
(new ImageTag('young_couple.jpg'))
->effect(Effect::vectorize());
Python:
CloudinaryImage("young_couple.jpg").image(effect="vectorize")
Node.js:
cloudinary.image("young_couple.jpg", {effect: "vectorize"})
Java:
cloudinary.url().transformation(new Transformation().effect("vectorize")).imageTag("young_couple.jpg");
JS:
cloudinary.imageTag('young_couple.jpg', {effect: "vectorize"}).toHtml();
jQuery:
$.cloudinary.image("young_couple.jpg", {effect: "vectorize"})
React:
<Image publicId="young_couple.jpg" >
<Transformation effect="vectorize" />
</Image>
Vue.js:
<cld-image publicId="young_couple.jpg" >
<cld-transformation effect="vectorize" />
</cld-image>
Angular:
<cl-image public-id="young_couple.jpg" >
<cl-transformation effect="vectorize">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("vectorize")).BuildImageTag("young_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("vectorize")).generate("young_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("vectorize")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Raster image - The vectorize effect can take a raster version of something that was originally a vector (for example, a corporate logo) and translate it to a scalable vector equivalent for reuse.
Raster:
Ruby:
cl_image_tag("cloudinary_logo.jpg")
PHP v1:
cl_image_tag("cloudinary_logo.jpg")
PHP v2:
(new ImageTag('cloudinary_logo.jpg'));
Python:
CloudinaryImage("cloudinary_logo.jpg").image()
Node.js:
cloudinary.image("cloudinary_logo.jpg")
Java:
cloudinary.url().imageTag("cloudinary_logo.jpg");
JS:
cloudinary.imageTag('cloudinary_logo.jpg').toHtml();
jQuery:
$.cloudinary.image("cloudinary_logo.jpg")
React:
<Image publicId="cloudinary_logo.jpg" >
</Image>
Vue.js:
<cld-image publicId="cloudinary_logo.jpg" >
</cld-image>
Angular:
<cl-image public-id="cloudinary_logo.jpg" >
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.BuildImageTag("cloudinary_logo.jpg")
Android:
MediaManager.get().url().generate("cloudinary_logo.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("cloudinary_logo.jpg")!, cloudinary: cloudinary)
Vectorized:
Ruby:
cl_image_tag("cloudinary_logo.png", :effect=>"vectorize")
PHP v1:
cl_image_tag("cloudinary_logo.png", array("effect"=>"vectorize"))
PHP v2:
(new ImageTag('cloudinary_logo.png'))
->effect(Effect::vectorize());
Python:
CloudinaryImage("cloudinary_logo.png").image(effect="vectorize")
Node.js:
cloudinary.image("cloudinary_logo.png", {effect: "vectorize"})
Java:
cloudinary.url().transformation(new Transformation().effect("vectorize")).imageTag("cloudinary_logo.png");
JS:
cloudinary.imageTag('cloudinary_logo.png', {effect: "vectorize"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_logo.png", {effect: "vectorize"})
React:
<Image publicId="cloudinary_logo.png" >
<Transformation effect="vectorize" />
</Image>
Vue.js:
<cld-image publicId="cloudinary_logo.png" >
<cld-transformation effect="vectorize" />
</cld-image>
Angular:
<cl-image public-id="cloudinary_logo.png" >
<cl-transformation effect="vectorize">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("vectorize")).BuildImageTag("cloudinary_logo.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("vectorize")).generate("cloudinary_logo.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("vectorize")).generate("cloudinary_logo.png")!, cloudinary: cloudinary)
You can also read about this transformation in our docs