update vectorize placeholder transformation (#259)

* Updated vectorize placeholder transformation

Author: strausr

projects/angular-cld/src/lib/cloudinary-image.component.spec.ts

@@ -853,7 +853,7 @@ describe('CloudinaryImage', () => {
       tick();
       fixture.detectChanges();
       const img = des[0].children[0].nativeElement as HTMLImageElement;
-      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_30/e_vectorize,q_1/bear'));
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_300/e_vectorize:3:0.1,f_svg/bear'));
     }));
   });
   describe('placeholder with cl-transformation', () => {

projects/angular-cld/src/lib/cloudinary-image.component.ts

@@ -158,7 +158,7 @@ export class CloudinaryImage
     if (placeholderOptions['width']) {
       if (placeholderOptions['width'] === 'auto') {
         placeholderOptions['width'] = image.getAttribute('data-width');
-      } else {
+      } else if (this.placeholderComponent.type !== 'vectorize') {
         placeholderOptions['width'] = Math.ceil(parseInt(options['width'], 10) * 0.1);
       }
     }

projects/angular-cld/src/lib/constants.ts

@@ -18,7 +18,7 @@ export const predominantColorTransform  = [
   {fetch_format: 'auto', quality: 'auto'}];
 
 export const placeholderImageOptions = {
-  'vectorize': {effect: 'vectorize', quality: 1},
+  'vectorize': {effect: 'vectorize:3:0.1', fetch_format: 'svg'},
   'pixelate': {effect: 'pixelate', quality: 1, fetch_format: 'auto'},
   'blur': {effect: 'blur:2000', quality: 1, fetch_format: 'auto'},
   'predominant-color': predominantColorTransform