Sideway
output.to from Sideway
Draft for Information Only

Content

SVG Monitor Examples:
 SVG Monitor Example:
  Geometry of HMonitor
  Monitor
  Small Monitor
  Small Monitor
 Sources and References

SVG Monitor Examples:

SVG Monitor Example:

SVG Monitor with blue center bounded by a blue 100*75 rectangle, and red center bounded by a red r58.3 circle with center offset 7.5 upward.

Geometry of HMonitor

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='320' height='290' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='266' height='266' viewBox='-25, -25, 266, 266' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <g transform='scale(2) translate(10 30)'>
   <rect x='0' y='0' width='100' height='75' stroke='blue' stroke-width='1' fill='None' />
   <circle cx='50' cy='37.5' r='1' stroke='blue' stroke-width='1' fill='cyan' />
   <circle cx='50' cy='30' r='58.3' stroke='red' stroke-width='1' fill='None' />
   <circle cx='50' cy='30' r='1' stroke='red' stroke-width='1' fill='red' />
   <path stroke='silver' stroke-width='4' fill='blue' opacity='.6'   d='m50,37.5 m0,-35.5 h48v56h-96v-56z' stroke-linejoin='round' />
   <path stroke='silver' stroke-width='3' opacity='.6' fill='black'  d='m50,37.5 m-7,22.5 v0.5 l-7,13 h28 l-7,-13 v-0.5' stroke-linejoin='round' />
   </g>
  </svg>
<text x='5' y='17' font-size='20'>(-10,-30)</text>
<text x='235' y='17' font-size='20'>(110,-30)</text>
<text x='5' y='285' font-size='20'>(-10,90)</text>
<text x='235' y='285' font-size='20'>(110,90)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='265' cy='25' r='2' fill='black'/>
<circle cx='25' cy='265' r='2' fill='black'/>
<circle cx='265' cy='265' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Monitor

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='180' height='125' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='126' height='101' viewBox='-25, -25, 126, 101' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='silver' stroke-width='4' fill='blue' opacity='.6'   d='m50,37.5 m0,-35.5 h48v56h-96v-56z' stroke-linejoin='round' />
   <path stroke='silver' stroke-width='3' opacity='.6' fill='black'  d='m50,37.5 m-7,22.5 v0.5 l-7,13 h28 l-7,-13 v-0.5' stroke-linejoin='round' />
 </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='95' y='17' font-size='20'>(100,0)</text>
<text x='5' y='120' font-size='20'>(0,75)</text>
<text x='95' y='120' font-size='20'>(100,75)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='125' cy='25' r='2' fill='black'/>
<circle cx='25' cy='100' r='2' fill='black'/>
<circle cx='125' cy='100' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Small Monitor

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='140' height='90' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='86' height='66' viewBox='-25, -25, 86, 66' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='silver' stroke-width='2' fill='blue' opacity='.6'   d='m25,18.75 m0,-17.75 h24v28h-48v-28z' stroke-linejoin='round' />
   <path stroke='silver' stroke-width='1.5' opacity='.6' fill='black' d='m25,18.75 m-3.5,11.25 v0.25 l-3.5,6.5 h14 l-3.5,-6.5 v-0.25' stroke-linejoin='round' />
 </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='55' y='17' font-size='20'>(60,0)</text>
<text x='5' y='85' font-size='20'>(0,40)</text>
<text x='55' y='85' font-size='20'>(60,40)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='85' cy='25' r='2' fill='black'/>
<circle cx='25' cy='65' r='2' fill='black'/>
<circle cx='85' cy='65' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Small Monitor

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='140' height='60' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='86' height='36' viewBox='-25, -25, 86, 36' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='silver' stroke-width='0.4' fill='blue' opacity='.6'   d='m5,3.75 m0,-3.55 h4.8v5.6h-9.6v-5.6z' stroke-linejoin='round' />
   <path stroke='silver' stroke-width='0.3' opacity='.6' fill='black'  d='m5,3.75 m-0.7,2.25 v0.05 l-0.7,1.3 h2.8 l-0.7,-1.3 v-0.05' stroke-linejoin='round' />
 </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='55' y='17' font-size='20'>(60,0)</text>
<text x='5' y='55' font-size='20'>(0,10)</text>
<text x='55' y='55' font-size='20'>(60,10)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='85' cy='25' r='2' fill='black'/>
<circle cx='25' cy='35' r='2' fill='black'/>
<circle cx='85' cy='35' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Sources and References

©sideway

ID: 211200027 Last Updated: 12/27/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
 IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Travel 18

Reference 79

Computer

Hardware 251

Software

Application 213

Digitization 35

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 431

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Set 1

Logic 1

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2025 Sideway . All rights reserved Disclaimers last modified on 06 September 2019