unable to parse mapnic svg export when used as a base layer with open layers

Question

I have exported an svg from http://www.openstreetmap.org with bounding box 24.06283 35.52435 24.07523 35.53458 and want to use it as a base layer in a map. I removed width and height from the svg, and left the viewport as instructed here :

http://trac.osgeo.org/openlayers/wiki/Addins/InlineXhtml

Layer.ScalableInlineXhtml

This layer class is somewhat analogous to the Layer.Image class but applies to inline (x)html. In addition to the url for the scalable inline content (image), the layer extent also needs to be specified. If an optional size (physical pixel dimensions) parameter is supplied then the maximum resolution for the layer will automatically be determined. In order for the layer to scale correctly when the map zoom level is changed, the inline content should be natively scalable.

Tip: If you are adding an svg image using Layer.ScalableInlineXhtml, the outermost element should probably not have "width" or "height" attributes specifying physical image dimensions (or the image may not be scalable). If so, consider removing those attributes. Then, if there is no existing "viewBox" attribute, consider including one that represents the initial image space. If necessary, specifying how the viewBox fits to the image viewport can be done with the "preserveAspectRatio" attribute. If the original "width" and "height" are in pixel dimensions, you can optionally specify them in the Layer.ScalableInlineXhtml size parameter to set the maximum resolution for the layer.

For example, instead of;

so the first line of my svg now looks like

svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 1971 1999" version="1.1"

my code is

var lat=24.068797645569;
var lon= 35.529528511192;
var zoom = 15;
gg   = new OpenLayers.Projection("EPSG:4326");   // WGS 1984
sm = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator

var lonlat = new OpenLayers.LonLat(lat, lon).transform(
gg, // transform from WGS 1984
sm // to Spherical Mercator
);
var map, baseLayer, placesLayer, geojsonParser ;
var selectedFeature;        
var init = function (onSelectFeatureFunction) {

var dataLayer =  new OpenLayers.Layer.Vector("Interactive Campus Buildings ", {
    projection:  new OpenLayers.Projection("EPSG:4326")
}); 
var features;
if(navigator.onLine==true){
    features = getFeatures("controller?action=GET_BUILDING_FEATURES");
}
else{
    alert("getting building features from appcache");
    features = getFeatures("Features/cachedBuildings.json");
}
dataLayer.addFeatures(features);           

var data_vector_style = new OpenLayers.Style({

    'fillColor':'orange',
    'fillOpacity':.8,
    'strokeColor':'red',
    'strokeWidth':4,
    'pointRadius':5
});
// Style Map tells vector Layer what style objects to use when features are
//  in a certain state (states can be default, select or temporary
var data_style_map = new OpenLayers.StyleMap({
    'default':data_vector_style
});
dataLayer.styleMap = data_style_map;

var selectControl = new OpenLayers.Control.SelectFeature(dataLayer, {
    autoActivate:true,
    onSelect: onSelectFeatureFunction
});
//--------- end data Layer -------------------

//need this for geolocation
var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
//--- Geolocation variable ----------------------------
var geolocate = new OpenLayers.Control.Geolocate({
    id: 'locate-control',
    geolocationOptions: {
        enableHighAccuracy: false,
        maximumAge: 0,
        timeout: 7000, 
        zoom:10
    }
});

//-----------------
baseLayer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
//    var localTiles =  new OpenLayers.Layer.OSM("Local Tiles", "tiles/\${z}/\${x}/\${y}.png", {
//        numZoomLevels: 19, 
//        alpha: true,
//        isBaseLayer: true
//    }); 
   var localTiles = new OpenLayers.Layer.ScalableInlineXhtml(
       "SVG layer",
       "icons/campus.svg",
       new OpenLayers.Bounds(24.06283, 35.52435, 24.07523, 35.53458), //left, bottom, right, top
       new OpenLayers.Size(1971,1999),
       {
          isBaseLayer: true
      }
       );

// create map
map = new OpenLayers.Map({
    div: "map",
    theme: null,
    projection: sm,
    numZoomLevels: 18,
    controls: [
         new OpenLayers.Control.Navigation(),
  new OpenLayers.Control.PanZoomBar(),

    new OpenLayers.Control.TouchNavigation({
        dragPanOptions: {
            enableKinetic: true
        }
    }),
    geolocate,
    selectControl
    ],
    layers: [ 
    baseLayer
    ,localTiles     
    ,vector
    ,dataLayer
    ]
});

map.setCenter(lonlat, zoom);                

// ----Geolocation
var style = {
    fillOpacity: 0.3,
    fillColor: '#000',
    strokeColor: '#f00',
    strokeOpacity: 0.6
};
geolocate.events.register("locationupdated", this, function(e) {
    vector.removeAllFeatures();
    vector.addFeatures([
        new OpenLayers.Feature.Vector(
            e.point,
            {},
            {
                graphicName: 'cross',
                strokeColor: '#f00',
                strokeWidth: 2,
                fillOpacity: 0,
                pointRadius: 10
            }
            ),
        new OpenLayers.Feature.Vector(
            OpenLayers.Geometry.Polygon.createRegularPolygon(
                new OpenLayers.Geometry.Point(e.point.x, e.point.y),
                e.position.coords.accuracy / 2,
                50,
                0
                ),
                {},
            style
            )
        ]);
    map.zoomToExtent(zoom);

});

}

The error I get is Error: Problem parsing d=""

I should mention I am also using

http://dev.openlayers.org/addins/InlineXhtml/trunk/lib/OpenLayers/Tile/InlineXhtml.js

http://dev.openlayers.org/addins/InlineXhtml/trunk/lib/OpenLayers/Layer/WMS/InlineXhtml.js

http://dev.openlayers.org/addins/InlineXhtml/trunk/lib/OpenLayers/Layer/InlineXhtml.js

http://dev.openlayers.org/addins/InlineXhtml/trunk/lib/OpenLayers/Layer/ScalableInlineXhtml.js

Output displays only the top half of my svg, zooms in and out but doesn't pan.

Update: I changed size to : new OpenLayers.Size(455 ,500),

and deleted paths with empty d's from the exported svg file.

maximum zoom out now shows the whole map, and progressively zooms in, but I still cant get the image to pan...