Henderson Petrophysics services include quicklook and detailed wireline log analysis, Wellsite geology,
Petrophysics field studies, Thin and laminated reservoirs, Low Resistivity Low Contrast reservoirs,
Tight/fractured reservoirs, Source rock analysis, Hydrocarbon reserves estimation and audit,
Petrophysics database development and maintenance, Advice for new ventures and contract negotiations

Henderson Petrophysics

How To Use Scalable Vector Graphics (SVG) to Display Wireline Log Data
- An Introduction -

What is SVG?

Scalable Vector Graphics (SVG) is the new language being developed by the World Wide Web Consortium (W3C) as the Web standard for presentation of vector graphics images.

In this article we introduce some of the tools and methods to help you get a start creating wireline log graphics using the SVG language. You will see that it is remarkably easy to create sophisticated composite log displays.

Most graphics on the web today are in raster (bitmap) formats (e.g. JPEG, GIF, and PNG). These graphics formats contain information about every pixel in the image. Vector graphics, on the other hand, describe an image in terms of shapes, lines and text. Raster graphics files tend to be large and the image quality deteriorates quickly when you try to enlarge or shrink the images. SVG vector files are compact and the images can be viewed at any scale without loss of clarity.

SVG images are ideal for presenting wireline log data because;

The screen images are always crisp and they can be scaled without loss of detail,
SVG files are, on average, smaller than other Web-graphic formats such as JPEG and GIF and they are quick to download from the Web,
SVG files can be printed at the resolution of your printer.
SVG files are composed of plain text, so they are "human readable" and they can be easily edited and,
The tools to create and view SVG files are either free or universally available. You can view SVG graphics using either Netscape or Internet Explorer browsers with the free Adobe SVG plug-in. SVG graphics files can be created using any text editor. You can create the coding for wireline log traces using very simple algorithms in any Spreadsheet. The free Visual Basic for Applications scripting language provided with Windows Office software is ideal for writing macros to create sophisticated SVG composite log displays.

Adobe's SVG Plug-In Required

Before you can view SVG files you will need viewer software. Adobe has released an excellent, free SVG viewer that lets you view SVG images on your Web browser. You can download the plug-in from the Adobe website.

A Sample SVG Wireline Log Display

The plot on the left is an example of how wireline log data can be displayed using the SVG language. The plot is a composite of very simple graphic elements;

Three rectangles (the log display track, depth track and a header box),
Some straight lines (the horizontal depth reference lines and a vertical grid),
A wireline log trace, and,
Some text annotation (depth annotation and the log header text)

Note: SVG files are composed of plain text. You can examine the source coding by placing the mouse cursor over the image, clicking the right mouse button and choosing the option View Source.

Although this sample SVG plot is very simple, you can add tracks, curves, annotations and shading to produce sophisticated composite wireline log displays.

In the following sections we will describe the simple steps for creating composite wireline log dispays.

Step 1: Getting Started with SVG

The "plot" on the left is an empty SVG file. All you can see is a blank, rectangular area.

The following first two lines in the SVG file "tell" your browser that the file is of type XML and also where it can find the rules for rendering the plot.

 
   <?xml version="1.0" standalone="no"?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" 
   "http://www.w3.org/
         TR/2000/CR-SVG-20000802/DTD/
         svg-20000802.dtd">

The following SVG code fragment defines the width and height of the SVG drawing area in pixels;

    <svg width="225" height="250">

Since the XML language requires that all tags must be closed, the SVG file must end with;

   </svg>

Step 2: Create some Basic Shapes

The SVG plot on the left shows the basic shapes (rectangles) that define the log and depth tracks and the log header box. The following code fragment defines the largest rectangle as having an origin at x = 10 and y = 40 and having a width of 150 and a height of 500.

<rect  x="10" y="40" width="150" height="500"/>

The three rectangles are grouped using the <g> and </g> tags. Graphical elements within these tags can share a common identity and style;

<g style="fill:white; stroke:blue; stroke-width:4;">
   <rect  x="10" y="40" width="150" height="500"/>
   <rect  x="160" y="40" width="50" height="500"/>
   <rect  x="10" y="10" width="150" height="30"/>
</g>

Step 3: Add Reference Grid Lines

In the SVG plot on the left we have added vertical and horizontal grid lines to the track that will contain the wireline log trace. Lines are drawn using the path command. The following code fragment shows how to draw one of the vertical lines;

<path d="M 25 40 v 500 "/>

The shorthand methods used in the above path command can be interpreted as;

Move to the location x=25 and y=40,
From that point draw a vertical line 500 pixels long towards the bottom of the plot.

The lowercase "v" indicates that the distance is relative (from the line starting point), not absolute (from the plot origin).

The line drawing style is defined within the path command using the following code fragment;

style="
   stroke:black; 
   fill:none; 
   stroke-width:0.3; 
   stroke-dasharray:3 3;"

This style definition can be roughly interpreted as a thin, black, dashed line.

If you examine the code for the SVG plot on the left you will see that there are 8 vertical dashed lines and one solid line that is slighlty thicker.

style="stroke:black; fill:none; stroke-width:.5;"

Step 4: Add Text Annotation in the Log Header and Depth Track

The SVG plot on the left shows text annotation in the depth track and the log header and also some silly annotation in the middle of the plot. The following code fragment shows the simplest text command;

<text x="100" y="100"> HELLO WORLD </text>

This annotation looks terrible because it has default color and stroke characteristics.

The following code illustrates how to format (style) the text and also how to position the annotation fragments.

<g
style="font-size:12; 
       font-weight:normal; 
       stroke:black; 
       stroke-width:.1; 
       fill:black;">

<text style="text-anchor:start"  
    x="13"  y="27">50</text>
<text style="text-anchor:middle" 
    x="85"  y="27">Gamma Ray</text>
<text style="text-anchor:end"
    x="155" y="27">100</text>
</g>

Step 5: Draw the Wireline Log Trace

The SVG plot on the left shows an example of a wireline log trace. The easiest way to draw a wireline log trace is by using the "path" command. The following code fragment shows part of the instructions for drawing the log trace.

<path
  style="
     fill:none;
     stroke:red; 
     stroke-width:2;
     stroke-dasharray: 3 3;"
  d ="M 115   40
        105.9 45
        ...
         83.2 532.5
         84.0 540
"/>

The style commands are pretty obvious (red, dashed line). The path command (after d=") can be written in a highly abbreviated format to minimize file size. The above code fragment can be interpreted as;

Move to x="115" and y="40",
Draw a line to x= "105.9" and y="45"

This process is repeated using x, y pairs until all of the log data is drawn.

For each log data point, the x and y position can be calculated using;

x = Left + ((LogValue - LeftLogValue) / (RightLogValue - LeftLogValue)) * TrackWidth

y = Top + ((Depth - TopDepth) / (BottomDepth - TopDepth)) * TrackLength

Step 6: Make It Pretty By Adding Curve Shading

The SVG file on the left has been modified from previous files by changing the line format and by adding shading. The following code fragment shows the styling that has produced the effect.

style="
   stroke:black;
   stroke-width:3;
   fill:green;
   opacity: 0.60"

In the above style command we have added a color fill. By making opacity less than 1.0 we can see the underlying track grid lines. If the opacity command is omitted or set to 1.0 the fill will be solid and opaque.

The path data has been modified from previous plots;

The starting and ending x position is at the track left boundary,
The last path character is "z" that tells the SVG rendering program to close the shape.

...
84.0    540
10      540
z"/>

Step 7: Animation

The SVG file on the left has been modified from previous files to enable various elements of the plot to be made visible or invisible.

Some elements of the plot (track border, grids, curve trace and shading) have been assigned identifiers (for example, id="Track"). Simple JavaScript code is used to toggle, on or off, the visibility of these elements.

Use the Checkbox form below to change the visibility of the plot elements.

Toggle visibility of SVG Plot Elements

Creating a Scrollable SVG Plot Viewer

Wireline log displays are usually much longer than they are wide. The Adobe SVG viewer does not have scrolling features that are suitable for these plots. However, an easy way to view long plots is to embed them into simple Web documents. The following code fragment shows an HTML document shell with an embedded SVG image file.


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<html><head></head>
	<body>
     	<embed src="../Images/LogSVGDemo_step8.svg" width="500" height="500" type="image/svg+xml" />
	</body></html>

Click here to see an SVG Wireline Log Composite plot with scrolling features

Place SVG Graphics into Microsoft Documents

SVG graphics files can be copied into Microsoft Word or PowerPoint documents by following these steps.

Place the mouse cursor over the SVG image,
Click the right mouse button and chose the option Copy SVG,
In the Microsoft document select the options Edit / Paste Special
Select Bitmap

Henderson Petrophysics Home Page

SVG References

Official W3C Scalable Vector Graphics Page
W3C Scalable Vector Graphics Specification
Adobe SVG Tutorial - Excellent Introduction
Sun XML Developer Connection - Introduction to SVG

How to Contact Us

Henderson Petrophysics offers a number of specialised formation evaluation services to the upstream oil and gas business.

If you want more information on our available services or our fee schedule you can send an e-mail (click on the icon below) or contact us using the following information;

Phone:    +61 7 3300 3980 (61 is the country code for Australia and 7 is the area code for Brisbane)
Mobile:    +61 407 653342
E-mail:    don@hendersonpetrophysics.com