This chapter demonstrates about the SVG layout which is different from CSS layout and box model. SVG layout are used for the better looking purposes, following are the concepts covered in this chapter.

• Layouts
• SVG Canvas
• SVG Viewport

SVG has number of layouts, user can define the custom layouts. Layouts depends on the horizontal manner and vertical manner which can split the entire canvas into groups and SVG-nodes. Following are the types of layouts.

In Svg Layouts Flow layout shapes are arranged in a horizontal series and vertical series. These shapes contain some parameters for arranging, in which one is the standard event parameter which is used to identify the group or SVG node. The second parameter is the Spacing which defines space between the two shapes. The code below demonstrates the Flow Layouts. [html] <?xml version="1.0" encoding="UTF-8" ?> <svg width="800" height="400"> <script type="text/ecmascript" xlink:href="SVGLayoutManagers.es" /> <g onload="verticalFlow(evt, 10)"> <rect x="0" y="0" width="100" height="100" fill="black" /> <circle cx="50" cy="50" r="50" fill="BlueViolet" /> <line x1="0" y1="100" x2="100" y2="0" stroke-width="10" stroke="Gold" /> </g> </svg> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

By using Grid layout user can split the the entire canvas into number of cells in SVG Layouts. In Grid Layouts number rows depends on the height of the cells. By using the on load attribute Grid Layout can be integrated into group and SVG-nodes. The code below demonstrates the Grid Layouts. [html] <?xml version="1.0" encoding="UTF-8" ?> <svg width="600" height="400"> <script type="text/ecmascript" xlink:href="SVGLayoutManagers.es" /> <g onload="gridLayout(evt, 10, 2)"> <rect x="0" y="0" width="100" height="100" fill="black" /> <circle cx="50" cy="50" r="50" fill="BlueViolet" /> <line x1="0" y1="100" x2="100" y2="0" stroke-width="10" stroke="Gold" /> <text x="0" y="80" font-family="Verdana" font-size="40" fill="black">SPLessons</text> </g> </svg> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

SVG canvas is known as the drawing area of the image which consist of all the elements, by using these user can adjust some properties of the images like height, width etc. The code below demonstrates the svg canvas. [html] <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> <style type="text/css"> .st0{fill:#E96724;stroke:#000000;stroke-miterlimit:10;} </style> <rect x="90.3" y="400.2" class="st0" width="241.1" height="156.2"/> <polygon class="st0" points="755.2,446 732.3,446 732.3,446 755.2,446 "/> <g> <path d="M60.5,531.5c2.3,1.5,5.7,2.6,9.3,2.6c5.3,0,8.5-2.8,8.5-6.9c0-3.7-2.2-5.9-7.6-8C64,516.9,60,513.4,60,507.7 c0-6.3,5.2-11,13.1-11c4.1,0,7.1,1,8.9,2l-1.4,4.3c-1.3-0.8-4-1.9-7.6-1.9c-5.5,0-7.6,3.3-7.6,6.1c0,3.8,2.5,5.6,8,7.8 c6.8,2.6,10.3,5.9,10.3,11.9c0,6.2-4.6,11.7-14.1,11.7c-3.9,0-8.2-1.2-10.3-2.6L60.5,531.5z"/> <path d="M90.7,497.9c2.5-0.4,5.8-0.8,10-0.8c5.2,0,8.9,1.2,11.3,3.4c2.2,1.9,3.5,4.9,3.5,8.5c0,3.7-1.1,6.5-3.1,8.6 c-2.8,2.9-7.3,4.4-12.4,4.4c-1.6,0-3-0.1-4.2-0.4v16.2h-5.2V497.9z M96,517.4c1.1,0.3,2.6,0.4,4.3,0.4c6.3,0,10.1-3.1,10.1-8.6 c0-5.4-3.8-8-9.5-8c-2.3,0-4,0.2-4.9,0.4V517.4z"/> <path d="M122.6,497.4h5.3v36.1h17.3v4.4h-22.6V497.4z"/> <path d="M152.9,524.3c0.1,7.1,4.6,10.1,10,10.1c3.8,0,6.1-0.7,8-1.5l1,3.8c-1.9,0.8-5.1,1.9-9.7,1.9c-8.9,0-14.3-5.9-14.3-14.7 s5.2-15.6,13.6-15.6c9.5,0,12,8.3,12,13.6c0,1.1-0.1,1.9-0.2,2.5H152.9z M168.4,520.5c0.1-3.3-1.4-8.5-7.3-8.5 c-5.4,0-7.7,4.9-8.1,8.5H168.4z"/> <path d="M179.3,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L179.3,532.5z"/> <path d="M203.1,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L203.1,532.5z"/> <path d="M253.8,523.1c0,10.7-7.5,15.4-14.5,15.4c-7.8,0-13.9-5.8-13.9-14.9c0-9.7,6.4-15.4,14.4-15.4 C248.2,508.2,253.8,514.3,253.8,523.1z M230.8,523.4c0,6.4,3.6,11.2,8.8,11.2c5,0,8.8-4.7,8.8-11.3c0-4.9-2.5-11.1-8.7-11.1 C233.5,512.2,230.8,517.9,230.8,523.4z"/> <path d="M260.5,516.7c0-3.1-0.1-5.5-0.2-7.9h4.7l0.3,4.8h0.1c1.4-2.7,4.8-5.4,9.6-5.4c4,0,10.3,2.4,10.3,12.4v17.3h-5.3v-16.7 c0-4.7-1.7-8.6-6.7-8.6c-3.4,0-6.1,2.5-7.1,5.4c-0.2,0.7-0.4,1.6-0.4,2.5v17.5h-5.3V516.7z"/> <path d="M293.1,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L293.1,532.5z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> [/html] Result By running the above code in a preferred browser then user will get the output as shown below. User can get the changes by adjusting the size like height and width of the canvas as shown below. [html] <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> <style type="text/css"> .st0{fill:#E96724;stroke:#000000;stroke-miterlimit:10;} </style> <rect x="110.3" y="450.2" class="st0" width="200.1" height="100.2"/> <polygon class="st0" points="755.2,446 732.3,446 732.3,446 755.2,446 "/> <g> <path d="M60.5,531.5c2.3,1.5,5.7,2.6,9.3,2.6c5.3,0,8.5-2.8,8.5-6.9c0-3.7-2.2-5.9-7.6-8C64,516.9,60,513.4,60,507.7 c0-6.3,5.2-11,13.1-11c4.1,0,7.1,1,8.9,2l-1.4,4.3c-1.3-0.8-4-1.9-7.6-1.9c-5.5,0-7.6,3.3-7.6,6.1c0,3.8,2.5,5.6,8,7.8 c6.8,2.6,10.3,5.9,10.3,11.9c0,6.2-4.6,11.7-14.1,11.7c-3.9,0-8.2-1.2-10.3-2.6L60.5,531.5z"/> <path d="M90.7,497.9c2.5-0.4,5.8-0.8,10-0.8c5.2,0,8.9,1.2,11.3,3.4c2.2,1.9,3.5,4.9,3.5,8.5c0,3.7-1.1,6.5-3.1,8.6 c-2.8,2.9-7.3,4.4-12.4,4.4c-1.6,0-3-0.1-4.2-0.4v16.2h-5.2V497.9z M96,517.4c1.1,0.3,2.6,0.4,4.3,0.4c6.3,0,10.1-3.1,10.1-8.6 c0-5.4-3.8-8-9.5-8c-2.3,0-4,0.2-4.9,0.4V517.4z"/> <path d="M122.6,497.4h5.3v36.1h17.3v4.4h-22.6V497.4z"/> <path d="M152.9,524.3c0.1,7.1,4.6,10.1,10,10.1c3.8,0,6.1-0.7,8-1.5l1,3.8c-1.9,0.8-5.1,1.9-9.7,1.9c-8.9,0-14.3-5.9-14.3-14.7 s5.2-15.6,13.6-15.6c9.5,0,12,8.3,12,13.6c0,1.1-0.1,1.9-0.2,2.5H152.9z M168.4,520.5c0.1-3.3-1.4-8.5-7.3-8.5 c-5.4,0-7.7,4.9-8.1,8.5H168.4z"/> <path d="M179.3,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L179.3,532.5z"/> <path d="M203.1,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L203.1,532.5z"/> <path d="M253.8,523.1c0,10.7-7.5,15.4-14.5,15.4c-7.8,0-13.9-5.8-13.9-14.9c0-9.7,6.4-15.4,14.4-15.4 C248.2,508.2,253.8,514.3,253.8,523.1z M230.8,523.4c0,6.4,3.6,11.2,8.8,11.2c5,0,8.8-4.7,8.8-11.3c0-4.9-2.5-11.1-8.7-11.1 C233.5,512.2,230.8,517.9,230.8,523.4z"/> <path d="M260.5,516.7c0-3.1-0.1-5.5-0.2-7.9h4.7l0.3,4.8h0.1c1.4-2.7,4.8-5.4,9.6-5.4c4,0,10.3,2.4,10.3,12.4v17.3h-5.3v-16.7 c0-4.7-1.7-8.6-6.7-8.6c-3.4,0-6.1,2.5-7.1,5.4c-0.2,0.7-0.4,1.6-0.4,2.5v17.5h-5.3V516.7z"/> <path d="M293.1,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L293.1,532.5z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

SVG viewport is known as the viewable section of the canvas and which is set on the SVG tag itself by adjusting the height and width attributes and also depends on the x and y values. The code below demonstrates the view port of SVG. [html] <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> <style type="text/css"> .st0{fill:#E96724;stroke:#000000;stroke-miterlimit:10;} </style> <rect x="90.3" y="400.2" class="st0" width="241.1" height="156.2"/> <polygon class="st0" points="755.2,446 732.3,446 732.3,446 755.2,446 "/> <g> <path d="M60.5,531.5c2.3,1.5,5.7,2.6,9.3,2.6c5.3,0,8.5-2.8,8.5-6.9c0-3.7-2.2-5.9-7.6-8C64,516.9,60,513.4,60,507.7 c0-6.3,5.2-11,13.1-11c4.1,0,7.1,1,8.9,2l-1.4,4.3c-1.3-0.8-4-1.9-7.6-1.9c-5.5,0-7.6,3.3-7.6,6.1c0,3.8,2.5,5.6,8,7.8 c6.8,2.6,10.3,5.9,10.3,11.9c0,6.2-4.6,11.7-14.1,11.7c-3.9,0-8.2-1.2-10.3-2.6L60.5,531.5z"/> <path d="M90.7,497.9c2.5-0.4,5.8-0.8,10-0.8c5.2,0,8.9,1.2,11.3,3.4c2.2,1.9,3.5,4.9,3.5,8.5c0,3.7-1.1,6.5-3.1,8.6 c-2.8,2.9-7.3,4.4-12.4,4.4c-1.6,0-3-0.1-4.2-0.4v16.2h-5.2V497.9z M96,517.4c1.1,0.3,2.6,0.4,4.3,0.4c6.3,0,10.1-3.1,10.1-8.6 c0-5.4-3.8-8-9.5-8c-2.3,0-4,0.2-4.9,0.4V517.4z"/> <path d="M122.6,497.4h5.3v36.1h17.3v4.4h-22.6V497.4z"/> <path d="M152.9,524.3c0.1,7.1,4.6,10.1,10,10.1c3.8,0,6.1-0.7,8-1.5l1,3.8c-1.9,0.8-5.1,1.9-9.7,1.9c-8.9,0-14.3-5.9-14.3-14.7 s5.2-15.6,13.6-15.6c9.5,0,12,8.3,12,13.6c0,1.1-0.1,1.9-0.2,2.5H152.9z M168.4,520.5c0.1-3.3-1.4-8.5-7.3-8.5 c-5.4,0-7.7,4.9-8.1,8.5H168.4z"/> <path d="M179.3,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L179.3,532.5z"/> <path d="M203.1,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L203.1,532.5z"/> <path d="M253.8,523.1c0,10.7-7.5,15.4-14.5,15.4c-7.8,0-13.9-5.8-13.9-14.9c0-9.7,6.4-15.4,14.4-15.4 C248.2,508.2,253.8,514.3,253.8,523.1z M230.8,523.4c0,6.4,3.6,11.2,8.8,11.2c5,0,8.8-4.7,8.8-11.3c0-4.9-2.5-11.1-8.7-11.1 C233.5,512.2,230.8,517.9,230.8,523.4z"/> <path d="M260.5,516.7c0-3.1-0.1-5.5-0.2-7.9h4.7l0.3,4.8h0.1c1.4-2.7,4.8-5.4,9.6-5.4c4,0,10.3,2.4,10.3,12.4v17.3h-5.3v-16.7 c0-4.7-1.7-8.6-6.7-8.6c-3.4,0-6.1,2.5-7.1,5.4c-0.2,0.7-0.4,1.6-0.4,2.5v17.5h-5.3V516.7z"/> <path d="M293.1,532.5c1.6,1,4.4,2,7,2c3.8,0,5.6-1.9,5.6-4.3c0-2.5-1.5-3.8-5.3-5.3c-5.3-1.9-7.7-4.7-7.7-8.2c0-4.7,3.8-8.5,10-8.5 c2.9,0,5.5,0.8,7.1,1.8l-1.3,3.8c-1.1-0.7-3.2-1.7-5.9-1.7c-3.1,0-4.8,1.8-4.8,4c0,2.4,1.7,3.5,5.5,5c5,1.9,7.6,4.4,7.6,8.7 c0,5.2-4,8.8-10.8,8.8c-3.2,0-6.1-0.8-8.2-2L293.1,532.5z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

• SVG positions is based on coordinate system.
• Drawing area is also known as SVG canvas.
• View port is viewable section of SVG.