view_box.rb.html

<!DOCTYPE public PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta name="generator" content="ex2html.rb" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/popup.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script>
    hljs.configure({ cssSelector: "pre" });
    hljs.highlightAll();
  </script>
  <title>RMagick example: view_box.rb</title>
</head>
<body>
<h1>view_box.rb</h1>
<div class="bodybox">
<div class="bodyfloat">
<pre class="language-ruby">
# frozen_string_literal: true

require 'rvg/rvg'

def example(cols, rows)
  rvg = Magick::RVG.new(cols, rows) do |canvas|
    canvas.background_fill = 'white'
    canvas.desc = &lt;&lt;-END_DESC
            Example - uses the viewBox attribute to automatically create an initial
            user coordinate system which causes the graphic to scale to fit into
            the viewport no matter what size the viewport is.
    END_DESC

    canvas.viewbox(0, 0, 1500, 1000)
    canvas.preserve_aspect_ratio('none')

    # This rectangle goes from (0,0) to (1500,1000) in user space.
    # Because of the viewBox attribute above,
    # the rectangle will end up filling the entire area
    # reserved for the SVG content.
    canvas.rect(1500, 1000).styles(fill: 'yellow', stroke: 'blue', stroke_width: 12)

    # A large, red triangle
    canvas.path('M 750,100 L 250,900 L 1250,900 z').styles(fill: 'red')

    # A text string that spans most of the viewport
    canvas.text(100, 600, 'Stretch to fit').styles(font_size: 200, font_style: 'normal', font_weight: 'normal', font_family: 'Verdana')
  end
  rvg.draw
end

example(300, 200).write('view_box_300x200.gif')
example(150, 200).write('view_box_150x200.gif')
</pre>
</div>
</div>
<div id="close"><a href="javascript:window.close();">Close window</a></div>
</body>
</html>