# Introduction to Victor

Victor is a lightweight, zero-dependencies Ruby library that lets you build SVG images using Ruby code.

# Example

Building a Meter Bar with Victor.

require 'victor'
include Victor

led_width = 10
led_gap = 2
total_width = 10 * (led_width + led_gap) + 8

svg = SVG.new viewBox: "0 0 #{total_width} 30"

# Add frame
svg.rect x: 2, y: 2, width: total_width - 4, height: 26,
  rx: 4, fill: 'none', stroke: '#666'

# Add leds
x = 5
10.times do |i|
  opacity = i < 7 ? 1 : 0.3
  svg.rect x: x, y: 5, width: led_width, height: 20,
    rx: 3, fill: 'green', fill_opacity: opacity

  x += led_width + led_gap
end

svg.save 'meter'

<svg viewBox="0 0 128 30" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

  <rect x="2" y="2" width="124" height="26" rx="4" fill="none" stroke="#666"/>
  <rect x="5" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="17" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="29" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="41" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="53" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="65" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="77" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
  <rect x="89" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
  <rect x="101" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
  <rect x="113" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>

</svg>

# How it works

Victor allows you to build SVG elements using plain Ruby. It translates any method call it doesn’t recognize into an SVG tag, so calling methods like rect, circle, or line automatically generates the corresponding SVG tags.

# Key Features

Initialization

Create an SVG with attributes like viewBox or style.

svg = Victor::SVG.new viewBox: '0 0 100 100'

SVG Elements

Add SVG elements with attributes by calling methods with the desired tag name.

svg.rect x: 0, y: 10, width: 100

Nesting

Organize SVG elements hierarchically by nesting them within blocks.

svg.g transform: 'translate(10 10)' do
  svg.rect x: 10, y: 10
end

Attributes and Inline Styling

Apply attributes and inline styles directly within the method call.

svg.rect style: {
  fill: :blue, font_family: 'Roboto'
}

CSS

Define stylesheets using a hash.

svg.css['.box'] = { fill: :red }

# Installation

Install Victor:

gem install victor

Optionally, if you want to work with the Victor Command Line Interface:

gem install victor-cli