svg-circle-to-red-converter

SVG Circle to Red Converter

A lightweight library to convert SVG circle elements to red fill using presentation attributes only (no style elements). Now supports both SVG string and JSON object inputs with multiple output formats.

Features

• Multiple Input Formats - Accept SVG as string markup or JSON objects
• Multiple Output Formats - Get results as string, JSON, DOM elements, or all three
• Input Normalization - Convert between string and JSON formats before processing
• Pure JavaScript functions - No React required for core functionality
• React components - Ready-to-use React components and hooks
• Style attribute conversion - Converts CSS styles to SVG presentation attributes
• Visual property preservation - Maintains stroke, stroke-width, opacity, etc.
• Error handling - Robust error handling with detailed feedback
• Multiple usage patterns - Function calls, React components, or render props

Installation

npm install svg-circle-to-red-converter

Usage

1. Pure JavaScript Function

Basic Usage (String Input)

import { convertSvgCirclesToRed } from 'svg-circle-to-red-converter'

const svgInput = `<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40" style="fill: blue; stroke: black; stroke-width: 2"/>
</svg>`

const result = convertSvgCirclesToRed(svgInput)

if (result.success) {
  console.log('Processed SVG string:', result.outputs.string)
  console.log('Processed SVG JSON:', result.outputs.json)
  console.log('Circles processed:', result.stats.coloredCircles)
} else {
  console.error('Error:', result.error)
}

JSON Input

const svgJson = {
  "name": "svg",
  "attrs": { "width": "200", "height": "200", "xmlns": "http://www.w3.org/2000/svg" },
  "children": [
    { "name": "circle", "attrs": { "cx": "100", "cy": "100", "r": "40", "fill": "blue" } }
  ]
}

const result = convertSvgCirclesToRed(svgJson, { inputType: 'json' })

Output Format Options

// Get only string output
const stringResult = convertSvgCirclesToRed(svgInput, { outputFormat: 'string' })

// Get only JSON output
const jsonResult = convertSvgCirclesToRed(svgInput, { outputFormat: 'json' })

// Get only DOM element
const domResult = convertSvgCirclesToRed(svgInput, { outputFormat: 'dom' })

// Get all formats (default)
const allFormats = convertSvgCirclesToRed(svgInput, { outputFormat: 'both' })

Input Normalization

import { normalizeSvgInput } from 'svg-circle-to-red-converter'

// Normalize SVG string to JSON
const normalized = normalizeSvgInput(svgString, 'string')
if (normalized.success) {
  console.log('JSON representation:', normalized.json)
}

// Normalize JSON to SVG string
const normalized = normalizeSvgInput(svgJson, 'json')
if (normalized.success) {
  console.log('SVG string:', normalized.string)
}

2. React Component

import { SvgCircleToRed } from 'svg-circle-to-red-converter'

function MyComponent() {
  const [svgInput, setSvgInput] = useState('')
  const [result, setResult] = useState(null)

  return (
    <div>
      <textarea 
        value={svgInput} 
        onChange={(e) => setSvgInput(e.target.value)}
        placeholder="Paste SVG here..."
      />
      
      <SvgCircleToRed
        svgInput={svgInput}
        inputType="auto"
        outputFormat="both"
        onResult={setResult}
        onError={(error) => console.error(error)}
      />
      
      {result && (
        <div>
          <h3>Result:</h3>
          {result.outputs.string && (
            <div>
              <h4>As String:</h4>
              <pre>{result.outputs.string}</pre>
            </div>
          )}
          {result.outputs.json && (
            <div>
              <h4>As JSON:</h4>
              <pre>{JSON.stringify(result.outputs.json, null, 2)}</pre>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

3. Render Props Pattern

import { SvgCircleToRed } from 'svg-circle-to-red-converter'

function MyComponent() {
  const [svgInput, setSvgInput] = useState('')

  return (
    <SvgCircleToRed svgInput={svgInput}>
      {({ convert, normalize, hasCircles, analyze, disabled }) => (
        <div>
          <textarea 
            value={svgInput} 
            onChange={(e) => setSvgInput(e.target.value)}
          />
          
          <button onClick={normalize} disabled={disabled}>
            Normalize Input
          </button>
          
          <button onClick={convert} disabled={disabled}>
            Convert {hasCircles ? `${analyze().circles} circles` : 'No circles found'}
          </button>
        </div>
      )}
    </SvgCircleToRed>
  )
}

4. React Hook

import { useSvgCircleToRed } from 'svg-circle-to-red-converter'

function MyComponent() {
  const { convert, normalize, hasCircles, analyze } = useSvgCircleToRed()
  const [svgInput, setSvgInput] = useState('')
  const [result, setResult] = useState(null)

  const handleConvert = async () => {
    const result = convert(svgInput, { outputFormat: 'both' })
    if (result.success) {
      setResult(result)
    }
  }

  const handleNormalize = async () => {
    const normalized = normalize(svgInput, 'auto')
    if (normalized.success) {
      setResult(normalized)
    }
  }

  return (
    <div>
      <textarea 
        value={svgInput} 
        onChange={(e) => setSvgInput(e.target.value)}
      />
      
      <button onClick={handleNormalize}>Normalize</button>
      <button onClick={handleConvert}>Convert</button>
      
      {result && (
        <div>
          <h3>Result:</h3>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  )
}

API Reference

convertSvgCirclesToRed(svgInput, options)

Converts SVG circles to red fill.

Parameters:

• svgInput (string|Object): SVG input as string or JSON object
• options (Object): Processing options
  • inputType (string): 'string', 'json', or 'auto' (default: 'auto')
  • outputFormat (string): 'string', 'json', 'dom', or 'both' (default: 'both')

Returns:

{
  success: boolean,
  outputs: {
    string?: string,      // SVG string (if outputFormat includes 'string')
    json?: Object,        // SVG object (if outputFormat includes 'json')
    jsonString?: string,  // JSON string (if outputFormat includes 'json')
    dom?: Element         // DOM element (if outputFormat includes 'dom')
  },
  stats: {
    inputType: string,
    totalCircles: number,
    coloredCircles: number,
    useInstancesTouched: number,
    // ... sanitization stats
  },
  inputType: string
}

normalizeSvgInput(svgInput, inputType)

Normalizes SVG input between string and JSON formats.

Parameters:

• svgInput (string|Object): SVG input to normalize
• inputType (string): 'string', 'json', or 'auto' (default: 'auto')

Returns:

{
  success: boolean,
  string: string,         // Normalized SVG string
  json: Object,           // Normalized SVG object
  jsonString: string,     // JSON string representation
  dom: Element            // DOM element
}

JSON Schema

The library accepts SVG JSON objects with this structure:

{
  "name": "svg",
  "attrs": {
    "width": "200",
    "height": "200",
    "xmlns": "http://www.w3.org/2000/svg"
  },
  "children": [
    {
      "name": "circle",
      "attrs": {
        "cx": "100",
        "cy": "100",
        "r": "40",
        "fill": "blue"
      }
    },
    "Text content can also be included",
    {
      "name": "rect",
      "attrs": { "x": "50", "y": "50", "width": "100", "height": "100" }
    }
  ]
}

Migration from v1

If you're upgrading from v1, the main changes are:

• Result structure: result.processedSvg is now result.outputs.string
• New options: Use inputType and outputFormat options for more control
• JSON support: You can now pass JSON objects directly
• Normalization: Use normalizeSvgInput() to convert between formats

Old way:

const result = convertSvgCirclesToRed(svgInput)
const processedSvg = result.processedSvg

New way:

const result = convertSvgCirclesToRed(svgInput, { outputFormat: 'string' })
const processedSvg = result.outputs.string