DOCSEARCHbyAlgolia
Submit Docs

oxvg

repository·main·Indexed 20 days ago

https://github.com/noahbald/oxvg

A high-performance vector image toolchain for transforming SVG documents into JSX and React components. It features an optimization engine as a high-performance alternative to SVGO, available via native NAPI bindings, WASM, and a Rust-based CLI. The toolset includes libraries for SVG manipulation (oxvg_ast, oxvg_collections), a linter, and a JSX transformer that follows SVGR configuration options.

Tokens
71.5K
Snippets
266
Records
349
Agent score
61%

What's inside oxvg

  1. Transform SVG to JSX components

    main
    OXVG provides a JSX transformer designed to convert SVG documents into JSX modules compatible with React, Preact, React Native, or any other JSX-compatible environment. The implementation aims to follow the SVGR standard as closely as possible.

  3. Use OXVG for SVG Optimization

    main

    The OXVG Optimiser is a high-performance alternative to SVGO. It is designed to run multiple times faster on certain tasks.

    Note: It is not an exact clone of SVGO, and users requiring strict parity with SVGO should continue using SVGO for now. Differences in behavior are documented in the project wiki and within the specific struct/interface declarations.

  4. Use OXVG Actions to manipulate SVGs

    main

    Actions are a set of commands used to manipulate an SVG document or extract information from it. They are similar to InkScape's actions but operate without a dependency on a UI or rendering engine.

    Note: The oxvg_actions crate is currently marked as Unstable.

  8. Migrate from SVGR to @oxvg/jsx

    main

    While @oxvg/jsx supports most SVGR features, there are key differences to note during migration:

    • Templates: Template chunks are strings instead of Babel objects, and templates must return a string.
    • Optimization: The svgo_config option is replaced by oxvg_config. Use convertSvgoConfig from @oxvg/napi to migrate your existing SVGO configuration.
    • Optimization Engine: The svgo option is an alias for oxvg and uses the OXVG engine instead of SVGO.
    • Environment: @oxvg/jsx uses native NAPI bindings and is only compatible with native (non-web) environments.
    • Omitted Options: The following SVGR options are not supported:
      • jsx (in templates)
      • plugins (process input/output manually instead)
      • runtimeConfig, configFile, indexTemplate, index (the library does not use the filesystem; read/write files manually)

  9. Build OXVG from source

    main

    If you want to build the project manually from the repository, use the following commands to clone the repo and build the release profile for the oxvg package.

    git clone git@github.com:noahbald/oxvg.git
cd oxvg
cargo build --profile release --package oxvg
./target/release/oxvg.exe --help

  11. Rotate elements using the rotate action

    main

    The rotate action applies a rotation to selected SVG elements by appending to their transform attribute. The rotation is applied in SVG 1.1 format and includes units.

    Key Behaviors:

    • Attribute Handling: It appends to the existing transform attribute. If the attribute currently has an "inherit" value, it will be overwritten.
    • Compatibility: The action has no effect on elements that do not accept transform as part of their SVG content model.
    • Origin: You can specify an x and y origin. If x or y are omitted, the origin defaults to 0 0.
    • Parameters: Accepts an angle (in degrees) and optional x and y coordinates as floating-point numbers.
    # Rotate by an angle (e.g., 45 degrees) around origin 0,0
-rotate 45

# Rotate by an angle (e.g., 90 degrees) around specific x,y coordinates (e.g., 10,20)
-rotate 90 10 20