@hozo/svg•Zero-Runtime DOM · react-native-svg

Universal SVG & Vector Filters

Vector icons, badges, and illustrations shouldn't require separate implementations for Web and Mobile. Hozo compiles a single, standard <Svg> namespace directly into native DOM SVG elements on Web and react-native-svg on iOS/Android.

Live Universal Vector & Filter Pipeline

The graphics below are rendered with pure vector elements and native filter effects.

Vector Primitives

Polygon, Circle, Line & Path

feDropShadow

Soft composite shadow filter

Gradients & Blur

LinearGradient & feGaussianBlur

Pillars of Universal SVG

Zero-Runtime Lowering

On Web, Hozo emits standard HTML5 <svg> elements with zero JavaScript wrapper code. On Native, it links directly to react-native-svg 15.9+.

Cross-Platform Filters

Exposes the full upstream filter subset supported on both platforms: Svg.FeColorMatrix, Svg.FeGaussianBlur, Svg.FeDropShadow, and Svg.FeBlend.

Semantic SVG Navigation

Svg.Link lowers to a semantic <a> on Web and a router-aware Pressable group on Native, sharing state with @hozo/navigation.

Authoring with @hozo/svg

Define filters in <Svg.Defs> and reference them via standard url(#id) strings.

import { Svg } from '@hozo/svg'

export function StatusBadge() {
  return (
    <Svg viewBox="0 0 80 80" accessibilityLabel="Verified Status">
      <Svg.Defs>
        <Svg.Filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
          <Svg.FeDropShadow dx={0} dy={4} stdDeviation={4} floodColor="#c8a882" floodOpacity={0.4} />
        </Svg.Filter>
      </Svg.Defs>
      <Svg.Circle cx={40} cy={40} r={24} fill="#c8a882" filter="url(#soft-shadow)" />
      <Svg.Path d="M32 40 L38 46 L50 34" stroke="#100f0e" strokeWidth={3} strokeLinecap="round" />
    </Svg>
  )
}