v1.0.1 (#44)

### Added
- Warning message when unknown fill/stroke/shape property given
- Support for specific border for each rectangle side

 ### Changed
- Reduced possible threshold in tests
- Performance improvements
- Typing improvements

 ### Fixed
- Raster graphic had incorrect size
- Incorrect empty space in text elements
- Typos in logger

 ### Removed
- SVGO optimizations

CHANGELOG.md

@@ -5,9 +5,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+## [1.0.1]
+### Added
+- Warning message when unknown fill/stroke/shape property given
+- Support for specific border for each rectangle side
+
+### Changed
+- Reduced possible threshold in tests
+- Performance improvements
+- Typing improvements
+
+### Fixed
+- Raster graphic had incorrect size
+- Incorrect empty space in text elements
+- Typos in logger
+
+### Removed
+- SVGO optimizations
+
 ## [1.0.0]
 ### Fix
-- gradients may start from incorrect place
+- Gradients may start from incorrect place
 
 ## [1.0.0-4]
 ### Changed:
@@ -311,7 +329,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Add Artboard parser
 
-[Unreleased]: https://github.com/L2jLiga/xd2svg/compare/v1.0.0...HEAD
+[Unreleased]: https://github.com/L2jLiga/xd2svg/compare/v1.0.1...HEAD
+[1.0.1]: https://github.com/L2jLiga/xd2svg/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/L2jLiga/xd2svg/compare/v1.0.0-4...v1.0.0
 [1.0.0-4]: https://github.com/L2jLiga/xd2svg/compare/v1.0.0-3...v1.0.0-4
 [1.0.0-3]: https://github.com/L2jLiga/xd2svg/compare/v1.0.0-2...v1.0.0-3

README.md

@@ -55,7 +55,6 @@ You can use utility from CLI
      options:
        -o, --output       - specify output path (default FileName directory or FileName.svg)
        -s, --single       - specify does output should be single file with all artboards or directory with separated each other (default: true)
-       -d, --disable-svgo - option to disable SVGO optimizations
    ```
 
 Or [import package into your project](example)

example/convert-directory.js

@@ -12,8 +12,7 @@ async function prepareSvg(inputFileName) {
   await promisify(extract)(inputFileName, {dir});
 
   const preparedSvgs = xd2svg(dir, {
-    single: false,
-    svgo: true
+    single: false
   });
 
   Object

example/convert-file.js

@@ -3,8 +3,7 @@ const xd2svg = require('xd2svg');
 
 const inputFileName = 'myFile.xd';
 const options = {
-  single: true,
-  svgo: false
+  single: true
 };
 
 xd2svg(inputFileName, options)

man/xd2svg.1

@@ -12,9 +12,6 @@ xd2svg - convert xd file to svg or html
 [
 .BI "\fB-s\fR, \fB\-\-signle\fR=" "true"
 ]
-[
-.BI "\fB-s\fR, \fB\-\-disable\-svgo"
-]
 .SH DESCRIPTION
 .B xd2svg
 is utility for converting Adobe XD files (*.xd) to SVG or HTML
@@ -31,10 +28,6 @@ The default destination path is specified by the input file name.
 .R Specify does output should be single file with all artboards or directory with separated each other.
 .R The default value is \fBtrue.
 
-.TP
-.BI "\fB-s\fR, \fB\-\-disable\-svgo"
-.R Disable SVGO optimizations
-
 .SH BUGS
 List of bugs can be found at https://github.com/L2jLiga/xd2svg/issues
 .SH VERSION

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xd2svg",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Utility for converting Adobe XD files (*.xd) to SVG",
   "keywords": [
     "svg",
@@ -53,7 +53,6 @@
   "dependencies": {
     "extract-zip": "1.6.7",
     "sanitize-filename": "1.6.1",
-    "svgo": "1.1.1",
     "tmp": "0.0.33",
     "xmlbuilder": "10.1.1"
   },
@@ -62,7 +61,6 @@
     "@types/mocha": "5.2.5",
     "@types/node": "8.10.37",
     "@types/sinon": "5.0.5",
-    "@types/svgo": "1.0.1",
     "@types/tmp": "0.0.33",
     "@types/xmlbuilder": "0.0.34",
     "blink-diff": "1.0.13",

src/cli/check-argv.ts

@@ -14,7 +14,6 @@ export function checkArgv(): void {
   ${logger.bold('options:')}
   ${logger.bold('-o, --output')}       - specify output path (default FileName directory or FileName.svg)
   ${logger.bold('-s, --single')}       - specify does output should be single file with all artboards or directory with separated each other (default: true)
-  ${logger.bold('-d, --disable-svgo')} - option to disable SVGO optimizations
 
   For additional information: man xd2svg-cli`);
 

src/cli/parse-params.ts

@@ -35,11 +35,6 @@ export function parseParams(): CliOptions {
         customOutput = true;
         break;
 
-      case '-d':
-      case '--disable-svgo':
-        options.svgo = false;
-        break;
-
       case '-s':
       case '--single':
         options.single = !/^f/i.test(value);

src/common/options.ts

@@ -8,10 +8,8 @@
 
 export interface Options {
   single: boolean;
-  svgo: boolean;
 }
 
 export const defaultOptions = {
   single: false,
-  svgo: true,
 };

src/core/artboard-converter.ts

@@ -12,6 +12,7 @@ import { bold, red }                                            from '../utils';
 import { createStyles }                                         from './create-styles';
 import { Artboard, ArtboardInfo, Line, Paragraph, Shape, Text } from './models';
 import { applyIfPossible }                                      from './utils';
+import { svgRectToClipPath }                                    from './utils/svg-rect-to-clip-path';
 
 export function artboardConverter(artboardsRoot: Artboard, artboardInfo: ArtboardInfo): string[] {
   return artboardsRoot.children.map(toArtboards(artboardInfo));
@@ -44,7 +45,7 @@ function toArtboards(artboardInfo: ArtboardInfo) {
   };
 }
 
-function createShape(srcObj: Shape, parentElement: XMLElementOrXMLNode, defs: XMLElementOrXMLNode) {
+function createShape(srcObj: Shape, parentElement: XMLElementOrXMLNode, defs: XMLElementOrXMLNode, svgObject: any) {
   const shape = parentElement.element(srcObj.type === 'compound' ? 'path' : srcObj.type);
 
   switch (srcObj.type) {
@@ -64,8 +65,24 @@ function createShape(srcObj: Shape, parentElement: XMLElementOrXMLNode, defs: XM
       if (srcObj.r) {
         const maxBR = Math.min(srcObj.width, srcObj.height) / 2;
 
-        shape.attribute('rx', Math.min(srcObj.r[0], maxBR));
-        shape.attribute('ry', Math.min(srcObj.r[1], maxBR));
+        const clipPath = svgRectToClipPath({
+          height: srcObj.height,
+          r: [
+            Math.min(srcObj.r[0], maxBR),
+            Math.min(srcObj.r[1], maxBR),
+            Math.min(srcObj.r[2], maxBR),
+            Math.min(srcObj.r[3], maxBR),
+          ],
+          width: srcObj.width,
+        }, defs);
+
+        clipPath.attribute('id', `clip-path-${srcObj.width}-${srcObj.height}-${srcObj.r.join('-')}`);
+
+        svgObject.style = svgObject.style || {};
+
+        svgObject.style.clipPath = {
+          ref: `clip-path-${srcObj.width}-${srcObj.height}-${srcObj.r.join('-')}`,
+        };
       }
       break;
 
@@ -103,10 +120,9 @@ function createText(srcObj: Text, parentElement: XMLElementOrXMLNode) {
   srcObj.paragraphs.map((paragraph: Paragraph) => {
     paragraph.lines.map((line: Line[]) => {
       line.map((linePart: Line) => {
-        const element: XMLElementOrXMLNode = svgTextElement.element(
-          'tspan',
-          {},
-          rawText.substring(linePart.from, linePart.to));
+        const element: XMLElementOrXMLNode = svgTextElement
+          .element('tspan')
+          .raw(rawText.substring(linePart.from, linePart.to).replace(/ /g, '\u00A0'));
 
         applyIfPossible(element, 'x', linePart.x);
         applyIfPossible(element, 'y', linePart.y);
@@ -128,7 +144,7 @@ export function createElem(svgObjCollection: { children: Artboard[] }, parentEle
 
       switch (svgObject.type) {
         case 'shape':
-          node = createShape(svgObject.shape, parentElement, defs);
+          node = createShape(svgObject.shape, parentElement, defs, svgObject);
           break;
 
         case 'text':

src/core/styles/fill.ts

@@ -62,22 +62,44 @@ function makeGradient(gradientInfo: GradientFill['gradient'], defs: XMLElementOr
 
 function createPattern(patternObject: Pattern, defs: XMLElementOrXMLNode): void {
   const resources = manifestInfo.resources;
-  const pattern = defs.element('pattern', {
-    height: '1',
-    id: patternObject.meta.ux.uid,
-    width: '1',
-    x: '0',
-    y: '0',
-  });
-  const image = pattern.element('image', {'xlink:href': `${resources[patternObject.meta.ux.uid]}`});
-
-  if (patternObject.meta.ux.scaleBehavior === 'cover' || patternObject.meta.ux.scaleBehavior === 'fill') {
-    pattern.attribute('patternContentUnits', 'objectBoundingBox');
-    image.attribute('preserveAspectRatio', 'none');
-    image.attribute('width', '1');
-    image.attribute('height', '1');
-  } else {
-    image.attribute('width', `${patternObject.width}`);
-    image.attribute('height', `${patternObject.height}`);
+
+  const {width, height, meta: {ux: {uid, scaleBehavior}}} = patternObject;
+
+  switch (scaleBehavior) {
+    case 'fill':
+      defs
+        .element('pattern', {
+          height: '100%',
+          id: uid,
+          viewBox: `0 0 ${width} ${height}`,
+          width: '100%',
+        })
+        .element('image', {
+          height,
+          width,
+          'xlink:href': `${resources[uid]}`,
+        });
+
+      break;
+
+    case 'cover':
+      defs
+        .element('pattern', {
+          height: '100%',
+          id: uid,
+          preserveAspectRatio: 'xMidYMid slice',
+          viewBox: `0 0 ${width} ${height}`,
+          width: '100%',
+        })
+        .element('image', {
+          height,
+          width,
+          'xlink:href': `${resources[uid]}`,
+        });
+
+      break;
+
+    default:
+      console.warn(`${logger.bold(logger.red('Fill/Stroke parser:'))} unknown property: %j`, patternObject);
   }
 }

src/core/styles/models/pattern.ts

@@ -12,7 +12,7 @@ export interface Pattern {
   meta: {
     ux: {
       uid: string;
-      scaleBehavior: string;
+      scaleBehavior: 'fill' | 'cover';
       hrefLastModifiedDate: number;
     };
   };