${filename}

2b:null 2c:["$","title",null,{"children":"SVG Sheet | Amit Sch | Observable"}] 31:T792,# SVG Sheet A notebook with importable functions to generate SVGs with concrete units (inches or centimeters), primarily geared towards plotting (e.g. with AxiDraw) javascript-generated vector graphics at 1:1 scale using Inkscape. Units help you account for plotter area and paper size and margin. The main importable function, **svgSheet**(*options*) returns a `

` with a downloadable `

Paper Size

${(select => { select.setAttribute('name', 'sizeName') return select })(DOM.select(['custom', ...paperSizes.map(d => d.name)]))}

Width Height

`, (widget, event={}) => { // this getter has a side-effect of updating the // in response to a user changing an or \n

\n L \n

\n R \n

\n B \n

\n \n `,\n widget => ({\n t: Number(widget.t.value),\n r: Number(widget.r.value),\n b: Number(widget.b.value),\n l: Number(widget.l.value),\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":918,"value":"**About margins** You might not want to rely on margins, depending on what you are optimizing for. Margins come into play in two ways: they affect the ruler position and, more importantly, when creating a layer, you can specify (via `inset: true`) that the new layer's `` be translated by the top-left margin amount. This lets you generate your SVG elements relative to an origin that is inset, without worrying about offsetting by margins, but it also cuts into the printable area of the plotter. So if you're maximizing the size of your print, specify `inset: false` to ignore margins, and/or zero out the margins, or use non-zero margins only to position the rules.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":852,"value":"## Exporting\n\nObservable has a button to download the svg, but there's also a convenience function that renders a button to do the same:\n\nSee **renderSvgDownloadButton**(*sheet, [filename], [buttonText]*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":208,"value":"downloadButton = renderSvgDownloadButton(\n sampleSheet,\n 'svg-sheet', \n 'Download SVG'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":860,"value":"For printing directly from the browser, there's a function for rendering a button that, when clicked, loads the SVG alone, in a popup.\n\nSee **renderPrintButton**(*sheet, [pdfDefaultFilename], [buttonText]*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":418,"value":"renderPrintButton(sampleSheet, 'svg-sheet', 'Print')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"## Common Paper Sizes\nThe array **paperSizes** has common US and European paper size names and their corresponding sizes in `'in'` or `'cm'`. Plus a dropdown and an importable `viewof`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":455,"value":"viewof namedSize = select({\n title: \"Preset\",\n options: paperSizes\n .filter(d => d.unit === (viewof unit).value)\n .map(d => d.name),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"paperSizes = [\n {\n name: 'junior legal',\n unit: 'in',\n size: [8, 5],\n },\n {\n name: 'letter',\n unit: 'in',\n size: [11, 8.5],\n },\n {\n name: 'legal',\n unit: 'in',\n size: [14, 8.5],\n },\n {\n name: 'tabloid',\n unit: 'in',\n size: [17, 11],\n },\n \n {\n name: 'A3',\n unit: 'cm',\n size: [42, 29.7],\n },\n {\n name: 'A4',\n unit: 'cm',\n size: [29.7, 21],\n },\n {\n name: 'A5',\n unit: 'cm',\n size: [21, 14.8],\n },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"function renderSvgDownloadButton(svg, filename, label) {\n if (svg && svg.nodeName.toLowerCase() !== 'svg') {\n svg = svg.querySelector('svg')\n }\n if (svg && svg.nodeName.toLowerCase() !== 'svg') {\n throw new Error('Could not find a valid SVG')\n }\n return DOM.download(() => {\n return new Blob([svg.outerHTML], {type: 'image/svg+xml'});\n }, filename, label)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"function renderPrintButton(svg, filename, label, options={}) {\n if (svg && svg.nodeName.toLowerCase() !== 'svg') {\n svg = svg.querySelector('svg')\n }\n if (svg && svg.nodeName.toLowerCase() !== 'svg') {\n throw new Error('Could not find a valid SVG')\n }\n const a = document.createElement(\"a\")\n const b = a.appendChild(document.createElement(\"button\"))\n b.textContent = label\n a.onclick = function() {\n const printWindow = window.open('', label, 'status=1')// does it need something like ,width=800,height=600?\n printWindow.document.write(`\n\n \n ${filename}\n \n \n ${svg.outerHTML}\n\n `)\n printWindow.print()\n }\n return a\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"mutable currentUnit = 'in'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"function formWidget(widget, getValue, setValue, options) {\n let verb = options && options.verb || 'change'\n d3.select(widget).selectAll('input, select').on(verb, function() {\n widget.value = getValue(widget, d3.event)\n widget.dispatchEvent(new CustomEvent('input'))\n d3.event.preventDefault()\n return false\n })\n d3.select(widget).selectAll('form').on('submit', function() {\n d3.event.preventDefault()\n d3.event.stopPropagation()\n return false\n })\n function defaultSetValue(widget, valueObj, explicitValue) {\n Object.entries(valueObj).forEach(([field, val]) => {\n widget[field].value = val\n })\n widget.value = explicitValue || valueObj\n widget.dispatchEvent(new CustomEvent('input'))\n }\n setValue = setValue || defaultSetValue\n return Object.assign(\n widget,\n {\n value: getValue(widget), \n setValue: setValue.bind(widget, widget), \n defaultSetValue: defaultSetValue.bind(widget, widget)\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"initialMargin = ({ t: .75, l: .5, r: .5, b: .5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"onChangeUnit = newUnit => {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import { renderTextPaths, renderTextInto } from '@meetamit/hershey-fonts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"import { slider, checkbox, select, radio, customStyle } from /*'@jashkenas/inputs'*/'3313d3159d85f958'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"