1

I designed a Scalable Vector Graphic using Inkscape on o/s X Yosemite and subsequently saved the SVG as a HTML document and received the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Make Austerity History</title>
</head>
<body>
    <canvas id='canvas' width='800' height='600'></canvas>

    <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var myString = String.format('Hello World {0} {1}', value1,     
    value2);
// #layer1

// #rect3362
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.rect(0.000000, 0.000000, 800.000000, 140.000000);
    ctx.fill();

// #rect3364
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.rect(0.000000, 140.000000, 180.000000, 460.000000);
    ctx.fill();

// #layer2

// #rect3367
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.rect(0.000000, 140.000000, 220.000000, 460.000000);
    ctx.fill();

// #rect3391
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 102, 0, 0.8)';
    ctx.rect(0.000000, 140.000000, 240.000000, 460.000000);
    ctx.fill();

// #add menu bar

// #rect3341
    ctx.beginPath();
    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
    ctx.rect(240.000000, 140.000000, 560.000000, 460.000000);
    ctx.fill();

// #layer3

// #rect3370
    ctx.beginPath();
    ctx.fillStyle = 'rgba(249, 249, 249, 0.8)';
    ctx.rect(0.000000, 0.000000, 800.000000, 140.000000);
    ctx.fill();
    ctx.;

    </script>
</body>
</html>

I wish to place a series of links to other pages on the left hand side which is colored orange. (I believe that's #rect3391) But, how do I work around the script?

I use Bluefish to code HTML.

Desmond Devlin
  • 11
  • 2
  • 2
    What you have here isn't an SVG. It has saved your picture as a blank HTML Canvas and a set of drawing operations. See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API – Paul LeBeau Mar 10 '15 at 01:23
  • Paul's right, but odder still is there's a syntax error on that last `ctx.;`. Either Desmond accidentally broke something, or it didn't export properly. – Josh from Qaribou Mar 10 '15 at 01:51
  • After loading this locally, there's so much wrong here it's hard to know where to begin. Don't export to canvas elements -- save as a 'plain svg' (not an inkscape svg) and use that as an image. This whole idea is intrinsically flawed - don't make websites by drawing them as vector graphics and them loading them directly; learn some CSS to style, and write clean, semantic HTML to define your content. Really, start reading MDN and/or taking some classes, and accept that you have a whole lot to learn, and it takes quite a bit of time to get good at this. – Josh from Qaribou Mar 10 '15 at 01:55
  • If you're saving svg for web usage in Inkscape, I'd recommend saving as "optimized svg", see http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html. – Erik Dahlström Mar 10 '15 at 16:09

0 Answers0