Skip to main content
SimilarExport ZIP
100%

read all svg file name in current dir -> edit svg text -> export

✓ Published0🌍 Public
HHirosaji
Last edited Dec 24, 2019
Created on Dec 24, 2019

This example reads every SVG file in the current directory, extracts its `viewBox` dimensions, and writes a modified copy to an `output` subfolder. Each file’s width and height attributes are explicitly set from the viewBox values, using Node.js’s `fs`, `path`, and `xmlhttprequest` modules to load and parse the raw SVG markup. The script filters files by extension, applies a regular expression to match the viewBox, and then performs a string replacement before saving the edited files. The result is a batch-processed set of SVGs with explicit dimensions for use in web contexts.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG FILE TESTER

This example demonstrates how an SVG file can be loaded and embedded into an HTML page. It uses D3’s `xml()` function to fetch an external SVG file, retrieves the document element, and adjusts its `viewBox` and dimensions to fit a specified height while preserving the aspect ratio. The modified SVG is then appended to the page body. The visualization also includes a static red cross-hatch pattern from the source file, rendered using standard SVG elements.

Aadventuresenglish.info@gmail.com
62% match
Loading thumbnail…

Viewport and viewBox

This example demonstrates how the SVG `viewBox` attribute changes the visible portion of a fixed-size canvas while using D3.js v7 to construct the scene. It draws a single blue circle inside a red-bordered `<svg>` element, then applies a `viewBox` with negative offsets and scaling to translate and zoom the coordinate system. The code uses `d3.select` to append the SVG and its child `<g>` element, and it utilizes the SVG API to inspect the geometry. The fixed width and height remain constant while the viewport shifts, showing how coordinates map differently in the rendered output.

GGiuliaPassoni
58% match
Loading thumbnail…

SVG Basics

This example introduces VizHub V3's runtime environment, demonstrating how a main function exported from index.js replaces an index.html entry point. The code renders SVG shapes—rectangles and circles—using the direct DOM API, with CSS styles controlling hover transitions that change fill colors and stroke widths. A separate SVG path with inline fill attributes draws a custom shape, while a "Hello World" div displays a font size adjustable by alt-dragging a number in the editor. Interactive widgets enable continuous hot reloading for real-time code feedback.

Aashutoshc018@gmail.com
58% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes using native SVG elements within an HTML document. It renders three circles with different radii and colors (white, purple, and cyan) alongside a single path that combines circular arcs and quadratic curves to form a leaf-like shape with a magenta fill and hot pink stroke. The drawing relies on SVG’s XML-based markup, including the `viewBox` attribute for coordinate scaling and inline attributes for shape geometry. The code includes an `index.js` file that merely logs “hello world” and a `styles.css` referencing a `.message` class not applied to any elements.

Eellie.ackerson26@gmail.com
57% match
Loading thumbnail…

181202_02_ Divide window_01

This example demonstrates how SVG viewport and viewBox attributes control the scaling and positioning of graphical elements within a designated area. It displays a grid of vertical and horizontal paths, along with a row of circles, all rendered within a single SVG element. The code uses D3 v5 selection methods to bind data and append elements, while CSS styles define the line colors. The viewBox is not hardcoded but is derived from parameterized dimensions for the grid and shapes.

LLudovicGouverneur
57% match
Loading thumbnail…

svg

This example shows a collection of basic SVG shapes and paths rendered directly in an HTML document. The main view displays two circles, one unfilled and one blue, alongside a rectangle with a blue outline and a blue line segment. The rectangle definition includes CSS-like hover styling and a transition property, though these interactions are not functional here. A second SVG in a separate file uses a path element with elliptical arcs and quadratic Bezier curves to draw a red abstract heart shape. The code relies solely on raw SVG markup and inline attributes to define the graphics.

Pprakashrai02
56% match
Loading thumbnail…

181202_01_Viewport

This example demonstrates how the SVG viewport and viewBox interact to scale a coordinate system. A set of vertical and horizontal path elements, drawn as colored lines, is defined within a viewBox of “0 0 100 50” and rendered inside an SVG element with a blue border. The number of horizontal and vertical lines is parameterized, and their positions are calculated dynamically using D3’s `range` function. The code uses D3 v5 to append paths to the SVG, while line styling is specified in an external CSS file.

LLudovicGouverneur
56% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a collection of basic SVG shapes, including overlapping circles, squares, and a stylized face with a hat, drawn directly in an HTML file using the SVG markup language. It shows how paths, circles, and rectangles can be combined with various stroke and fill colors to create illustrative figures. The rendering uses native SVG elements like `path` and `circle` within an inline `<svg>` container, without relying on external JavaScript libraries. The design is inspired by a Kati-dev-hu tutorial.

RRochelle
56% match