├── .npmignore ├── assets ├── linked.css ├── imported.css ├── test.png └── d3-save-svg.min.js ├── .gitignore ├── index.js ├── src ├── namespaces.js ├── download.js ├── convertRaster.js ├── preprocess.js ├── d3-save-svg.js └── setInlineStyles.js ├── CONTRIBUTING.md ├── LICENSE ├── package.json ├── test └── save-svg-test.js ├── README.md └── index.html /.npmignore: -------------------------------------------------------------------------------- 1 | build/*.zip 2 | test/ 3 | -------------------------------------------------------------------------------- /assets/linked.css: -------------------------------------------------------------------------------- 1 | .linked { 2 | fill: #f0f; 3 | } -------------------------------------------------------------------------------- /assets/imported.css: -------------------------------------------------------------------------------- 1 | .imported { 2 | fill: #f0f; 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | build/ 3 | node_modules 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /assets/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edeno/d3-save-svg/HEAD/assets/test.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export { 2 | save, 3 | embedRasterImages, 4 | } from './src/d3-save-svg'; 5 | -------------------------------------------------------------------------------- /src/namespaces.js: -------------------------------------------------------------------------------- 1 | export default { 2 | svg: 'http://www.w3.org/2000/svg', 3 | xhtml: 'http://www.w3.org/1999/xhtml', 4 | xlink: 'http://www.w3.org/1999/xlink', 5 | xml: 'http://www.w3.org/XML/1998/namespace', 6 | xmlns: 'http://www.w3.org/2000/xmlns/', 7 | }; 8 | -------------------------------------------------------------------------------- /src/download.js: -------------------------------------------------------------------------------- 1 | export default function (svgInfo, filename) { 2 | window.URL = (window.URL || window.webkitURL); 3 | var blob = new Blob(svgInfo.source, {type: 'text\/xml'}); 4 | var url = window.URL.createObjectURL(blob); 5 | var body = document.body; 6 | var a = document.createElement('a'); 7 | 8 | body.appendChild(a); 9 | a.setAttribute('download', filename + '.svg'); 10 | a.setAttribute('href', url); 11 | a.style.display = 'none'; 12 | a.click(); 13 | a.parentNode.removeChild(a); 14 | 15 | setTimeout(function() { 16 | window.URL.revokeObjectURL(url); 17 | }, 10); 18 | } 19 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | Fork, then clone the repo: 3 | 4 | git clone git@github.com:your-username/d3-save-svg.git 5 | 6 | Set up your machine: 7 | 8 | npm install 9 | 10 | If the tests pass, then the library should build in the `/build` folder. 11 | Make your change. Add tests for your change. Make the tests pass: 12 | 13 | npm test 14 | 15 | Push to your fork and [submit a pull request](https://github.com/edeno/d3-save-svg/compare/) to the develop branch. 16 | 17 | ### Additional Notes 18 | Testing is via [Tape](https://github.com/substack/tape) and [jsdom](https://github.com/tmpvar/jsdom). Right now the tests are pretty rudimentary. Also `index.html` serves as a good check on whether things are working. 19 | 20 | Development is done using the [git-flow](http://nvie.com/posts/a-successful-git-branching-model/) workflow. Please merge changes into the `develop` branch. 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 The New York Times 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /src/convertRaster.js: -------------------------------------------------------------------------------- 1 | export {converterEngine, getImageBase64, isDataURL}; 2 | 3 | function converterEngine(input) { // fn BLOB => Binary => Base64 ? 4 | var uInt8Array = new Uint8Array(input); 5 | var i = uInt8Array.length; 6 | var biStr = []; //new Array(i); 7 | while (i--) { 8 | biStr[i] = String.fromCharCode(uInt8Array[i]); 9 | } 10 | 11 | var base64 = window.btoa(biStr.join('')); 12 | return base64; 13 | }; 14 | 15 | function getImageBase64(url, callback) { 16 | var xhr = new XMLHttpRequest(url); 17 | var img64; 18 | xhr.open('GET', url, true); // url is the url of a PNG/JPG image. 19 | xhr.responseType = 'arraybuffer'; 20 | xhr.callback = callback; 21 | xhr.onload = function() { 22 | img64 = converterEngine(this.response); // convert BLOB to base64 23 | this.callback(null, img64); // callback : err, data 24 | }; 25 | 26 | xhr.onerror = function() { 27 | callback('B64 ERROR', null); 28 | }; 29 | 30 | xhr.send(); 31 | }; 32 | 33 | function isDataURL(str) { 34 | var uriPattern = /^\s*data:([a-z]+\/[a-z0-9\-]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i; 35 | return !!str.match(uriPattern); 36 | } 37 | -------------------------------------------------------------------------------- /src/preprocess.js: -------------------------------------------------------------------------------- 1 | import setInlineStyles from './setInlineStyles'; 2 | import prefix from './namespaces'; 3 | 4 | export default function (svg) { 5 | svg.setAttribute('version', '1.1'); 6 | 7 | // removing attributes so they aren't doubled up 8 | svg.removeAttribute('xmlns'); 9 | svg.removeAttribute('xlink'); 10 | 11 | // These are needed for the svg 12 | if (!svg.hasAttributeNS(prefix.xmlns, 'xmlns')) { 13 | svg.setAttributeNS(prefix.xmlns, 'xmlns', prefix.svg); 14 | } 15 | 16 | if (!svg.hasAttributeNS(prefix.xmlns, 'xmlns:xlink')) { 17 | svg.setAttributeNS(prefix.xmlns, 'xmlns:xlink', prefix.xlink); 18 | } 19 | 20 | setInlineStyles(svg); 21 | 22 | var xmls = new XMLSerializer(); 23 | var source = xmls.serializeToString(svg); 24 | var doctype = ''; 25 | var rect = svg.getBoundingClientRect(); 26 | var svgInfo = { 27 | top: rect.top, 28 | left: rect.left, 29 | width: rect.width, 30 | height: rect.height, 31 | class: svg.getAttribute('class'), 32 | id: svg.getAttribute('id'), 33 | childElementCount: svg.childElementCount, 34 | source: [doctype + source], 35 | }; 36 | 37 | return svgInfo; 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3-save-svg", 3 | "version": "0.0.2", 4 | "description": "D3 plugin for exporting SVGs. Based on svg-crowbar by Shan Carter", 5 | "keywords": [ 6 | "d3", 7 | "svg", 8 | "svg-crowbar" 9 | ], 10 | "license": "BSD-3-Clause", 11 | "main": "build/d3-save-svg.js", 12 | "jsnext:main": "index", 13 | "homepage": "https://github.com/edeno/d3-save-svg", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/edeno/d3-save-svg" 17 | }, 18 | "scripts": { 19 | "pretest": "mkdir -p build && node -e 'process.stdout.write(\"var version = \\\"\" + require(\"./package.json\").version + \"\\\"; export * from \\\"../index\\\"; export {version};\");' > build/bundle.js && rollup -f umd -u d3-save-svg -n d3_save_svg -o build/d3-save-svg.js -- build/bundle.js", 20 | "test": "faucet `find test -name '*-test.js'`", 21 | "prepublish": "npm run test && uglifyjs build/d3-save-svg.js -c -m -o build/d3-save-svg.min.js && rm -f build/d3-save-svg.zip && zip -j build/d3-save-svg.zip -- LICENSE README.md build/d3-save-svg.js build/d3-save-svg.min.js" 22 | }, 23 | "devDependencies": { 24 | "faucet": "0.0", 25 | "jsdom": "^7.1.0", 26 | "rollup": "0.20.5", 27 | "tape": "4", 28 | "uglify-js": "2", 29 | "w3c-blob": "0.0.1", 30 | "xmlserializer": "^0.3.3" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/d3-save-svg.js: -------------------------------------------------------------------------------- 1 | import download from './download'; 2 | import preprocess from './preprocess'; 3 | import prefix from './namespaces'; 4 | import {converterEngine, getImageBase64, isDataURL} from './convertRaster'; 5 | 6 | export function save(svgElement, config) { 7 | if (svgElement.nodeName !== 'svg' || svgElement.nodeType !== 1) { 8 | throw 'Need an svg element input'; 9 | } 10 | 11 | var config = config || {}; 12 | var svgInfo = preprocess(svgElement, config); 13 | var defaultFileName = getDefaultFileName(svgInfo); 14 | var filename = config.filename || defaultFileName; 15 | var svgInfo = preprocess(svgElement); 16 | download(svgInfo, filename); 17 | } 18 | 19 | export function embedRasterImages(svg) { 20 | 21 | var images = svg.querySelectorAll('image'); 22 | [].forEach.call(images, function(image) { 23 | var url = image.getAttribute('href'); 24 | 25 | // Check if it is already a data URL 26 | if (!isDataURL(url)) { 27 | // convert to base64 image and embed. 28 | getImageBase64(url, function(err, d) { 29 | image.setAttributeNS(prefix.xlink, 'href', 'data:image/png;base64,' + d); 30 | }); 31 | } 32 | 33 | }); 34 | 35 | } 36 | 37 | function getDefaultFileName(svgInfo) { 38 | var defaultFileName = 'untitled'; 39 | if (svgInfo.id) { 40 | defaultFileName = svgInfo.id; 41 | } else if (svgInfo.class) { 42 | defaultFileName = svgInfo.class; 43 | } else if (window.document.title) { 44 | defaultFileName = window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase(); 45 | } 46 | 47 | return defaultFileName; 48 | } 49 | -------------------------------------------------------------------------------- /test/save-svg-test.js: -------------------------------------------------------------------------------- 1 | var tape = require('tape'); 2 | var d3SaveSvg = require('../'); 3 | var jsdom = require('jsdom'); 4 | var xmls = require('xmlserializer'); 5 | var Blob = require('w3c-blob'); 6 | 7 | var revokeObjectURLShim = function() {}; 8 | 9 | var createObjectURLShim = function() {}; 10 | 11 | var xmlsShim = function() { 12 | this.serializeToString = xmls.serializeToString; 13 | }; 14 | 15 | tape('save() throws an error if element is not an svg element.', function(test) { 16 | jsdom.env({ 17 | html: '

hello

', 18 | done: function(errs, window) { 19 | 20 | window.URL.createObjectURL = createObjectURLShim; 21 | window.URL.revokeObjectURL = revokeObjectURLShim; 22 | global.window = window; 23 | global.XMLSerializer = xmlsShim; 24 | global.Blob = Blob; 25 | global.document = window.document; 26 | var h1 = window.document.querySelector('h1'); 27 | test.throws(function() {d3SaveSvg.save(h1);}); 28 | }, 29 | }); 30 | 31 | test.end(); 32 | }); 33 | 34 | tape('save() accepts svg elements', function(test) { 35 | jsdom.env({ 36 | html: '

hello

', 37 | done: function(errs, window) { 38 | 39 | window.URL.createObjectURL = createObjectURLShim; 40 | window.URL.revokeObjectURL = revokeObjectURLShim; 41 | global.window = window; 42 | global.XMLSerializer = xmlsShim; 43 | global.Blob = Blob; 44 | global.document = window.document; 45 | var svg = window.document.querySelector('svg'); 46 | test.doesNotThrow(function() {d3SaveSvg.save(svg);}); 47 | }, 48 | }); 49 | 50 | test.end(); 51 | }); 52 | -------------------------------------------------------------------------------- /src/setInlineStyles.js: -------------------------------------------------------------------------------- 1 | import prefix from './namespaces'; 2 | 3 | export default function (svg) { 4 | 5 | // add empty svg element 6 | var emptySvg = window.document.createElementNS(prefix.svg, 'svg'); 7 | window.document.body.appendChild(emptySvg); 8 | var emptySvgDeclarationComputed = window.getComputedStyle(emptySvg); 9 | 10 | // hardcode computed css styles inside svg 11 | var allElements = traverse(svg); 12 | var i = allElements.length; 13 | while (i--) { 14 | explicitlySetStyle(allElements[i]); 15 | } 16 | 17 | emptySvg.parentNode.removeChild(emptySvg); 18 | 19 | function explicitlySetStyle(element) { 20 | var cSSStyleDeclarationComputed = window.getComputedStyle(element); 21 | var i; 22 | var len; 23 | var key; 24 | var value; 25 | var computedStyleStr = ''; 26 | 27 | for (i = 0, len = cSSStyleDeclarationComputed.length; i < len; i++) { 28 | key = cSSStyleDeclarationComputed[i]; 29 | value = cSSStyleDeclarationComputed.getPropertyValue(key); 30 | if (value !== emptySvgDeclarationComputed.getPropertyValue(key)) { 31 | // Don't set computed style of width and height. Makes SVG elmements disappear. 32 | if ((key !== 'height') && (key !== 'width')) { 33 | computedStyleStr += key + ':' + value + ';'; 34 | } 35 | 36 | } 37 | } 38 | 39 | element.setAttribute('style', computedStyleStr); 40 | } 41 | 42 | function traverse(obj) { 43 | var tree = []; 44 | tree.push(obj); 45 | visit(obj); 46 | function visit(node) { 47 | if (node && node.hasChildNodes()) { 48 | var child = node.firstChild; 49 | while (child) { 50 | if (child.nodeType === 1 && child.nodeName != 'SCRIPT') { 51 | tree.push(child); 52 | visit(child); 53 | } 54 | 55 | child = child.nextSibling; 56 | } 57 | } 58 | } 59 | 60 | return tree; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /assets/d3-save-svg.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define("d3-save-svg",["exports"],t):t(e.d3_save_svg={})}(this,function(e){"use strict";function t(e,t){window.URL=window.URL||window.webkitURL;var n=new Blob(e.source,{type:"text/xml"}),i=window.URL.createObjectURL(n),o=document.body,r=document.createElement("a");o.appendChild(r),r.setAttribute("download",t+".svg"),r.setAttribute("href",i),r.style.display="none",r.click(),r.parentNode.removeChild(r),setTimeout(function(){window.URL.revokeObjectURL(i)},10)}function n(e){function t(e){var t,n,i,r,s=window.getComputedStyle(e),a="";for(t=0,n=s.length;n>t;t++)i=s[t],r=s.getPropertyValue(i),r!==o.getPropertyValue(i)&&"height"!==i&&"width"!==i&&(a+=i+":"+r+";");e.setAttribute("style",a)}function n(e){function t(e){if(e&&e.hasChildNodes())for(var i=e.firstChild;i;)1===i.nodeType&&"SCRIPT"!=i.nodeName&&(n.push(i),t(i)),i=i.nextSibling}var n=[];return n.push(e),t(e),n}var i=window.document.createElementNS(u.svg,"svg");window.document.body.appendChild(i);for(var o=window.getComputedStyle(i),r=n(e),s=r.length;s--;)t(r[s]);i.parentNode.removeChild(i)}function i(e){e.setAttribute("version","1.1"),e.removeAttribute("xmlns"),e.removeAttribute("xlink"),e.hasAttributeNS(u.xmlns,"xmlns")||e.setAttributeNS(u.xmlns,"xmlns",u.svg),e.hasAttributeNS(u.xmlns,"xmlns:xlink")||e.setAttributeNS(u.xmlns,"xmlns:xlink",u.xlink),n(e);var t=new XMLSerializer,i=t.serializeToString(e),o='',r=e.getBoundingClientRect(),s={top:r.top,left:r.left,width:r.width,height:r.height,"class":e.getAttribute("class"),id:e.getAttribute("id"),childElementCount:e.childElementCount,source:[o+i]};return s}function o(e){for(var t=new Uint8Array(e),n=t.length,i=[];n--;)i[n]=String.fromCharCode(t[n]);var o=window.btoa(i.join(""));return o}function r(e,t){var n,i=new XMLHttpRequest(e);i.open("GET",e,!0),i.responseType="arraybuffer",i.callback=t,i.onload=function(){n=o(this.response),this.callback(null,n)},i.onerror=function(){t("B64 ERROR",null)},i.send()}function s(e){var t=/^\s*data:([a-z]+\/[a-z0-9\-]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;return!!e.match(t)}function a(e,n){if("svg"!==e.nodeName||1!==e.nodeType)throw"Need an svg element input";var n=n||{},o=i(e,n),r=d(o),s=n.filename||r,o=i(e);t(o,s)}function l(e){var t=e.querySelectorAll("image");[].forEach.call(t,function(e){var t=e.getAttribute("href");s(t)||r(t,function(t,n){e.setAttributeNS(u.xlink,"href","data:image/png;base64,"+n)})})}function d(e){var t="untitled";return e.id?t=e.id:e["class"]?t=e["class"]:window.document.title&&(t=window.document.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()),t}var u={svg:"http://www.w3.org/2000/svg",xhtml:"http://www.w3.org/1999/xhtml",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},w="0.0.2";e.version=w,e.save=a,e.embedRasterImages=l}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # d3-save-svg 2 | 3 | A fork of the nytimes [svg-crowbar](http://nytimes.github.io/svg-crowbar/) bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file --- A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with [d3.js](https://d3js.org) in mind, but it should work fine no matter how you choose to generate your SVG. 4 | 5 | [Project page](http://edeno.github.com/d3-save-svg/) 6 | 7 | ### Differences from the bookmarklet 8 | + Can use to download specific svg, which can be incorporated into buttons for exporting images. See example on the [project page](http://edeno.github.com/d3-save-svg/). 9 | + Allows specification of custom file names. 10 | + Handles embedded raster images. 11 | + Has convenience method for embedding raster images. 12 | 13 | ### Note 14 | Most of this has been cobbled together from stackoverflow and issues logged on the nytimes svg-crowbar repo. 15 | 16 | ### API 17 | 18 | #### save(svgElement, config) 19 | Given a SVG element and an optional configuration object, `save` embeds external CSS styling and downloads the file. The filename will be (in order of existence) the svgElement ID, the svgElement class, or the window title. Optionally, you can specify the filename in the config object such that `config.filename` will be the name of the downloaded file. 20 | 21 | ```javascript 22 | d3.select('button#export').on('click', function() { 23 | var config = { 24 | filename: 'customFileName', 25 | } 26 | d3_save_svg.save(d3.select('svg').node(), config); 27 | }); 28 | ``` 29 | 30 | #### embedRasterImages(svgElement) 31 | A convenience function for converting all referenced raster images in an SVG element to base64 data via data URI, so that it is embedded in the SVG. This ensures that the downloaded image will contain the raster image. Probably should be updated to just directly convert a referenced link to data URI instead of doing it in two separate steps. 32 | 33 | ```javascript 34 | svg 35 | .append('g') 36 | .append('image') 37 | .attr('xlink:href', 'assets/test.png') 38 | .attr("width", 100) 39 | .attr("height", 100) 40 | .attr("x", (width / 2) - 50) 41 | .attr("y", (height / 6) * 5); 42 | 43 | d3_save_svg.embedRasterImages(svg.node()); 44 | ``` 45 | 46 | ### Contributing 47 | `npm install` to get the development dependencies, test and build. 48 | 49 | Testing is via [Tape](https://github.com/substack/tape) and [jsdom](https://github.com/tmpvar/jsdom). Right now the tests are pretty rudimentary. Also `index.html` serves as a good check on whether things are working. 50 | 51 | Development is done using the [git-flow](http://nvie.com/posts/a-successful-git-branching-model/) workflow. Please merge changes into the `develop` branch. 52 | 53 | See [CONTRIBUTING.md](/CONTRIBUTING.md) for additional information. 54 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SVG Crowbar 5 | 6 | 72 | 73 | 74 | 75 | 76 |

d3-save-svg

77 |

A fork of the nytimes svg-crowbar bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with d3.js in mind, but it should work fine no matter how you choose to generate your SVG.

78 | 79 |

Code is on github here.

80 | 81 |

Differences from the bookmarklet

82 |

Can use to download specific svg, which can be incorporated into buttons for exporting images. See example below.

83 |

Allows specification of custom file names.

84 |

Handles embedded raster images.

85 |

Has convenience method for embedding raster images.

86 | 87 |

Notes

88 |

Pixels will map to points when opening in Illustrator.

89 |

Dimensions of the document will be the same as the dimensions of your SVG element.

90 |

All colors are RGB, which is not ideal for print documents, but CMYK is not supported in SVG 1.1.

91 | 92 |

Gotchas

93 |

It only works in Chrome.

94 |

Currently the https version of the script is being served from raw.github.com, which might break in the future. If the script stops running on https pages, check back here—you might have to re-install the bookmarklet at that time.

95 |

Descendent ">" CSS selectors will crash Adobe Illustrator, therefore those styles are stripped out. Be warned.

96 |

Adobe Illustrator also chokes on fonts that it doesn’t recognize. Font-family assigments like “sans-serif” (or if you're using webfonts like “nyt-franklin”) will cause Illustrator to give this error when opening the file: “The operation cannot complete because of an unknown error. [CANT]”. This is fixed in Illustrator version 17.1. Other SVG viewers are pretty okay with them though.

97 |

Some styles won’t propogate down if they depend on markup outside of the svg element. For instance, if you use CSS that targets an SVG path element by an id on the div surrounding the SVG ("#map svg path") then those styles won’t show up in the resulting file.

98 | 99 |

A Sample SVG

100 |
101 | 105 | 106 | 107 | 108 | 184 | 185 | 186 | --------------------------------------------------------------------------------