Paste In SVG code

100%

Paste In SVG code

✓ Published0🌍 Public

Last edited Apr 2, 2019

Created on Apr 2, 2019

This example demonstrates how to insert raw SVG markup directly into a Sketch document using the Sketch DOM API and the `sketch/createLayerFromData` function with an 'svg' format. The code prompts the user for an SVG string through `UI.getInputFromUser`, then assigns the resulting layer to the selected page. It relies on the `sketch/dom` module to handle document and page selection, and `sketch/ui` for the input dialog, creating a quick bridge between external SVG code and Sketch’s native layer hierarchy.

AI-generated description

Similar vizzes

Loading thumbnail…

SF Symbols -> Sketch

The example imports SVG files from URLs copied to the macOS pasteboard and places them onto a selected artboard in Sketch. It uses the Sketch JavaScript API with `sketch.ShapePath`, `sketch.getSelectedDocument`, and `MSSVGImporter` to parse and convert each SVG into a native layer. The script reads URLs via `NSPasteboard` and `readObjectsForClasses_options`, then positions each imported layer horizontally with an offset of 50 pixels. The code demonstrates batch SVG ingestion from clipboard data into a design document.

KKevinGutowski

72% match

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG by creating and manipulating vector graphics directly through the DOM. The code uses the `document.createElementNS` API to construct SVG elements programmatically in plain JavaScript, with no external libraries. It renders a simple visualization from scratch, showing how basic shapes and attributes are defined and assembled within an HTML page that loads a single `scripts.js` file. The approach highlights the raw SVG syntax and DOM manipulation techniques that form the foundation for more complex data-driven visualizations.

MMarc Brüssel

67% match

Loading thumbnail…

SVG-fundamentals

This example demonstrates how to create an SVG element from scratch using only the Document API, specifically the `createElement` method. The code constructs a new `svg` node, attaches it to the document body with `appendChild`, and logs the resulting body to the console. The visualization shows the raw, empty SVG container as the foundation for future vector graphics. No supplementary libraries are used; the approach relies purely on core JavaScript DOM manipulation, establishing the basic structural pattern for subsequent SVG rendering.

Jjustsomeletter

66% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to build an interactive SVG scene using the Document Object Model (DOM) and the SVG namespace. It creates a full-window SVG element populated with a mask and a vertical rectangle, using methods like `createElementNS` and `setAttribute`. The code prepares a loop for generating 100 elements but currently leaves it empty, showing foundational SVG construction in raw JavaScript without external libraries. The visualization illustrates basic SVG structure, viewport sizing, and programmatic element creation for future graphics.

AAleOG

65% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape drawing and grouping within an HTML page, using raw SVG elements such as `circle`, `rect`, `line`, and `path`. The code shows how attributes like `fill`, `stroke`, `stroke-width`, and transforms (`translate` and `scale`) affect appearance, while CSS classes style the line group and its path. Static coordinates and colors define the composition, with no data binding or interactive behavior. The page also loads a bundled script that sets text content, though the target element is not present in the HTML.

ZZhipeng Xu

64% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—positioned and styled directly within an HTML page. The code uses raw SVG markup embedded in the document, with transformations like `scale()` and `translate()` applied to groups, and CSS classes controlling stroke properties. Shapes inherit fill and stroke attributes from parent `<g>` elements, showing how SVG styling cascades. The rendering relies entirely on the browser’s native SVG engine, with no external JavaScript libraries, making it a minimal illustration of vector graphics fundamentals.

YY-oringe

64% match

Loading thumbnail…

SVG

This example demonstrates how to create an SVG visualization using D3 v6's selection API to append elements directly to the DOM. The code shows a minimal setup with a 960x500 SVG canvas, using `d3.select` and `selection.attr` methods. Commented-out code illustrates an alternative approach using native DOM methods like `createElementNS` for manual SVG construction, including a mask element and rectangles. The current active code simply creates an empty SVG, while the commented section reveals a potential pattern for applying masks to shapes within the SVG namespace.

WWater.Danlei

64% match

Loading thumbnail…

My thing

This example demonstrates how SVG elements are constructed and layered directly in the browser using the Document Object Model (DOM) and the `createElementNS` API. It shows a series of vertical black lines evenly spaced across the viewport, followed by a single blue rectangle that fills the entire screen, obscuring the lines beneath it. The rendering approach relies on manual SVG creation via `document.createElementNS`, setting attributes for line coordinates and rectangle dimensions, and appending nodes to the document body. No external libraries are used; the code runs on raw JavaScript and SVG.

Ccniekel

64% match