CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-svg

SVG library for React Native applications with comprehensive element support and cross-platform compatibility

—

Pending
Overview
Eval results
Files

container-elements.mddocs/

Container Elements

Container elements for organizing, structuring, and reusing SVG content including the root SVG element, groups, definitions, and symbols.

Capabilities

Svg

Root SVG container element that establishes the SVG coordinate system and viewport.

/**
 * Root SVG container element
 * @param width - Width of the SVG viewport
 * @param height - Height of the SVG viewport
 * @param viewBox - Viewport coordinates and dimensions "minX minY width height"
 * @param preserveAspectRatio - How to scale the viewBox content
 * @param color - Current color for child elements
 * @param title - Accessible title for the SVG
 */
interface SvgProps extends GProps, ViewProps, HitSlop {
  width?: NumberProp;
  height?: NumberProp;
  viewBox?: string;
  preserveAspectRatio?: string;
  color?: ColorValue;
  title?: string;
}

declare const Svg: React.ComponentType<SvgProps>;

Usage Examples:

import Svg, { Circle } from "react-native-svg";

// Basic SVG container
<Svg width="100" height="100">
  <Circle cx="50" cy="50" r="40" fill="blue" />
</Svg>

// SVG with viewBox for scalable graphics
<Svg width="200" height="100" viewBox="0 0 100 50">
  <Circle cx="25" cy="25" r="20" fill="red" />
</Svg>

// SVG with aspect ratio preservation
<Svg
  width="200"
  height="100"
  viewBox="0 0 100 100"
  preserveAspectRatio="xMidYMid meet"
>
  <Circle cx="50" cy="50" r="40" fill="green" />
</Svg>

G (Group)

Groups elements together for collective transformations, styling, and organization.

/**
 * Groups SVG elements for collective styling and transformation
 * @param opacity - Opacity applied to entire group
 */
interface GProps extends CommonPathProps {
  opacity?: NumberProp;
}

declare const G: React.ComponentType<GProps>;

Usage Examples:

import Svg, { G, Circle, Rect } from "react-native-svg";

// Basic grouping
<Svg width="200" height="100">
  <G fill="blue" stroke="black" strokeWidth="2">
    <Circle cx="50" cy="50" r="30" />
    <Rect x="100" y="20" width="60" height="60" />
  </G>
</Svg>

// Group with transformation
<Svg width="200" height="200">
  <G transform="translate(100,100) rotate(45)">
    <Rect x="-25" y="-25" width="50" height="50" fill="red" />
    <Circle cx="0" cy="0" r="5" fill="white" />
  </G>
</Svg>

// Nested groups with different styles
<Svg width="300" height="200">
  <G fill="lightblue" stroke="blue">
    <Circle cx="50" cy="50" r="30" />
    <G fill="lightgreen" stroke="green" transform="translate(100,0)">
      <Circle cx="50" cy="50" r="30" />
      <G fill="pink" stroke="red" transform="translate(100,0)">
        <Circle cx="50" cy="50" r="30" />
      </G>
    </G>
  </G>
</Svg>

Defs

Container for reusable SVG elements that are not directly rendered but can be referenced by other elements.

/**
 * Container for reusable SVG element definitions
 * Elements defined within Defs are not rendered but can be referenced by other elements
 */
interface DefsProps {
  children?: React.ReactNode;  
}

declare const Defs: React.ComponentType<DefsProps>;

Usage Examples:

import Svg, { Defs, LinearGradient, Stop, Circle, ClipPath, Rect } from "react-native-svg";

// Gradient definitions
<Svg width="200" height="100">
  <Defs>
    <LinearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="red" />
      <Stop offset="100%" stopColor="blue" />
    </LinearGradient>
  </Defs>
  <Circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</Svg>

// Clipping path definitions
<Svg width="200" height="100">
  <Defs>
    <ClipPath id="clip1">
      <Circle cx="50" cy="50" r="35" />
    </ClipPath>
  </Defs>
  <Rect x="10" y="10" width="80" height="80" fill="green" clipPath="url(#clip1)" />
</Svg>

Symbol

Reusable graphic element with its own coordinate system that can be instantiated with Use elements.

/**
 * Reusable symbol definition with its own coordinate system
 * @param id - Unique identifier for referencing
 * @param viewBox - Internal coordinate system "minX minY width height"
 * @param preserveAspectRatio - How to scale the symbol content
 */
interface SymbolProps extends CommonPathProps {
  id?: string;
  viewBox?: string;
  preserveAspectRatio?: string;
}

declare const Symbol: React.ComponentType<SymbolProps>;

Usage Examples:

import Svg, { Defs, Symbol, Circle, Rect, Use } from "react-native-svg";

// Define and use symbols
<Svg width="300" height="200">
  <Defs>
    <Symbol id="icon" viewBox="0 0 50 50">
      <Circle cx="25" cy="25" r="20" fill="blue" />
      <Rect x="20" y="20" width="10" height="10" fill="white" />
    </Symbol>
  </Defs>
  
  <Use href="#icon" x="10" y="10" width="50" height="50" />
  <Use href="#icon" x="80" y="10" width="30" height="30" />
  <Use href="#icon" x="130" y="10" width="70" height="70" />
</Svg>

Use

References and renders other SVG elements, enabling reuse and instantiation of symbols.

/**
 * References and renders other SVG elements
 * @param href - Reference to element ID (e.g., "#symbolId")
 * @param x - X coordinate for rendering
 * @param y - Y coordinate for rendering  
 * @param width - Width override for symbols
 * @param height - Height override for symbols
 * @param opacity - Opacity of the referenced element
 */
interface UseProps extends CommonPathProps {
  href?: string;
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  opacity?: NumberProp;
}

declare const Use: React.ComponentType<UseProps>;

Usage Examples:

import Svg, { Defs, G, Circle, Use } from "react-native-svg";

// Reuse a group
<Svg width="300" height="200">
  <Defs>
    <G id="pattern">
      <Circle cx="0" cy="0" r="10" fill="red" />
      <Circle cx="20" cy="0" r="10" fill="blue" />
    </G>
  </Defs>
  
  <Use href="#pattern" x="50" y="50" />
  <Use href="#pattern" x="100" y="80" />
  <Use href="#pattern" x="150" y="110" />
</Svg>

// Use with transformations
<Svg width="200" height="200">
  <Defs>
    <Circle id="dot" cx="0" cy="0" r="5" fill="green" />
  </Defs>
  
  <Use href="#dot" x="50" y="50" />
  <Use href="#dot" x="100" y="50" transform="scale(2)" />
  <Use href="#dot" x="50" y="100" transform="rotate(45)" />
</Svg>

ForeignObject

Embeds non-SVG content within an SVG, such as HTML elements or React Native views.

/**
 * Embeds foreign content within SVG
 * @param x - X coordinate of foreign object
 * @param y - Y coordinate of foreign object
 * @param width - Width of foreign object area
 * @param height - Height of foreign object area
 */
interface ForeignObjectProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
}

declare const ForeignObject: React.ComponentType<ForeignObjectProps>;

Usage Examples:

import React from "react";
import { Text, View } from "react-native";
import Svg, { ForeignObject, Circle } from "react-native-svg";

// Embed React Native components
<Svg width="200" height="200">
  <Circle cx="100" cy="100" r="90" fill="lightblue" stroke="blue" strokeWidth="2" />
  <ForeignObject x="50" y="80" width="100" height="40">
    <View style={{ backgroundColor: 'white', padding: 10, borderRadius: 5 }}>
      <Text style={{ textAlign: 'center' }}>React Native View</Text>
    </View>
  </ForeignObject>
</Svg>

Image

Embeds raster images (PNG, JPEG, etc.) within SVG content with support for scaling and aspect ratio preservation.

/**
 * Embeds raster images within SVG
 * @param x - X coordinate of image
 * @param y - Y coordinate of image
 * @param width - Width of image display area
 * @param height - Height of image display area
 * @param href - Image source (URI string or React Native source object)
 * @param xlinkHref - Legacy href attribute (deprecated, use href)
 * @param preserveAspectRatio - How to scale and position image within display area
 * @param opacity - Image opacity
 * @param onLoad - Callback when image loads successfully
 */
interface ImageProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  href?: ImageSource | string;
  xlinkHref?: ImageSource | string; // deprecated
  preserveAspectRatio?: string;
  opacity?: NumberProp;
  onLoad?: (e: NativeSyntheticEvent<ImageLoadEventData>) => void;
}

declare const Image: React.ComponentType<ImageProps>;

Usage Examples:

import Svg, { Image } from "react-native-svg";

// Image from URI
<Svg width="200" height="200">
  <Image
    x="10"
    y="10"
    width="180"
    height="180"
    href="https://example.com/image.png"
    preserveAspectRatio="xMidYMid meet"
  />
</Svg>

// Image from React Native asset
import logo from "./assets/logo.png";

<Svg width="150" height="100">
  <Image
    x="25"
    y="25"
    width="100"
    height="50"
    href={logo}
    opacity="0.8"
    onLoad={() => console.log("Image loaded")}
  />
</Svg>

// Image with different aspect ratio handling
<Svg width="300" height="200">
  <Image
    x="50"
    y="50"
    width="200"
    height="100"
    href="https://example.com/wide-image.jpg"
    preserveAspectRatio="xMinYMin slice"
  />
</Svg>

Preserve Aspect Ratio Values:

The preserveAspectRatio attribute controls how images are scaled and positioned:

  • Alignment: xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax
  • Scaling: meet (fit entirely), slice (fill area, may crop), none (stretch to fit)
// Examples of different aspect ratio settings
<Image preserveAspectRatio="xMidYMid meet" />  // Center, fit entirely (default)
<Image preserveAspectRatio="xMinYMin slice" /> // Top-left, fill area
<Image preserveAspectRatio="none" />           // Stretch to fit exactly

Container Organization Patterns

Hierarchical Grouping

<Svg width="300" height="200">
  <G id="scene">
    <G id="background" fill="lightgray">
      <Rect width="300" height="200" />
    </G>
    <G id="objects" transform="translate(50,50)">
      <G id="shape1" fill="red">
        <Circle cx="0" cy="0" r="30" />
      </G>
      <G id="shape2" fill="blue" transform="translate(100,0)">
        <Rect x="-20" y="-20" width="40" height="40" />
      </G>
    </G>
  </G>
</Svg>

Reusable Component Library

<Svg width="400" height="300">
  <Defs>
    {/* Define reusable components */}
    <Symbol id="house" viewBox="0 0 100 100">
      <Rect x="20" y="40" width="60" height="60" fill="brown" />
      <Polygon points="10,40 50,10 90,40" fill="red" />
      <Rect x="35" y="60" width="15" height="25" fill="darkbrown" />
      <Rect x="60" y="55" width="12" height="12" fill="lightblue" />
    </Symbol>
    
    <Symbol id="tree" viewBox="0 0 60 80">
      <Rect x="27" y="60" width="6" height="20" fill="brown" />
      <Circle cx="30" cy="40" r="20" fill="green" />
    </Symbol>
  </Defs>
  
  {/* Use components multiple times */}
  <Use href="#house" x="50" y="100" width="100" height="100" />
  <Use href="#house" x="200" y="120" width="80" height="80" />
  <Use href="#tree" x="20" y="150" width="60" height="80" />
  <Use href="#tree" x="320" y="140" width="60" height="80" />
  <Use href="#tree" x="150" y="80" width="40" height="60" />
</Svg>

Install with Tessl CLI

npx tessl i tessl/npm-react-native-svg

docs

basic-shapes.md

clipping-masking.md

container-elements.md

filter-effects.md

gradients-patterns.md

index.md

paths-complex-shapes.md

text-elements.md

xml-processing.md

tile.json