Search Results

Search found 465 results on 19 pages for 'svg'.

Page 1/19 | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Firefox -- Dynamically embedding <svg> element in SVG

    - by zourtney
    I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected: <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> </svg> However, if you dynamically add this element using JavaScript, the browser crashes. Simple example: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>SVG island example</title> <script type="text/javascript"><![CDATA[ function crash( ) { svgs = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "svg" ); for ( var i = 0; i < svgs.length; i++ ) { var e = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ); svgs[i].appendChild( e ); } } ]]></script> </head> <body> <svg id="mySVG" xmlns="http://www.w3.org/2000/svg"> </svg> <button onclick="crash()">Crash Firefox</button> </body> </html> Interestingly, if I do a getElementById, it works fine. Interesting, but not particularly helpful in my situation since I'm storing pointers to SVGDocuments. Example: function doesntCrash( ) { var svg = document.getElementById( "mySVG" ); var e = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ); svg.appendChild( e ); } As far as I can tell, this is a Firefox bug. Does anyone have any insight into this matter?

    Read the article

  • manipulate objects outside svg with javascript-function inside the svg

    - by Christian Benke
    Hello! I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible. Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call and load relevant information of this country into a div in the html site where the svg is embedded. "onclick="location.href='xxx'"" redirects to the respective site which is fine, but i'd prefer to run a js-function that fetches the site with ajax - but running a javascript-function in the svg only seems to work for functions and elements defined in the svg, not outside of it. Is it basically possible to manipulate anything outside the svg through a js-function in the svg? How? Regards Christian

    Read the article

  • SVG images grow and create scrollbars when on the server

    - by zuko
    Okay so I embedded some SVG images into my page and opened it locally on Chrome and it looked fine. I upload the same file to the server and look at the page online and the SVG images have grown by maybe 5-10% and are surrounded by scroll bars like they are overflowing. I think it probably has to do with my lack of knowledge on how SVG and Embed work. What's really puzzling me though, is that it works fine locally. (I have cache disabled.) Help? Thanks. Edit: code HTML: <embed type="image/svg+xml" src="content/web-logo.svg"/> There's no CSS on the image. I'm not sure if I was just wrong before or if I changed something I'm not aware of, but it doesn't appear to be actually changing size anymore. It just decides to stuff it into a scrollbox. pic: https://www.dropbox.com/s/wt1aufi7nl1fpyi/svg-problem.png

    Read the article

  • C++ Game Library for SVG Based Game

    - by lefticus
    I'm looking into building a cross-platform opensource 2D RPG style game engine for ChaiScript. I want to be able to do all of the graphics with SVG and need joystick input. I also need the libraries I use to be opensource and compatible with the BSD license. I'm familiar with allegro, ClanLib, and SDL. As far as I can tell, none of these libraries have built in or obvious integration for SVG. Also, I'm aware of the previous conversations on this site regarding Qt for SVG game development. I'm hoping to avoid Qt because of the size and complexity of making it a requirement. Also, Qt does not seem to have joystick input support, which would require that SDL or some other library also be used. So my question can be summed up as this: What is the best way to get SVG and joystick support in a 2D C++ library while minimizing dependencies as much as possible (preferably avoiding Qt altogether)?

    Read the article

  • vector quality of svg and pdf

    - by Kasper
    I'm converting pdf files to svg as it is easier to use svg files on webpages. I first thought the quality of svg must be similar to pdf, as they are both vector graphics. However, now I look a little better on it, it seems that pdf is a bit superior: (https://dl.dropboxusercontent.com/u/58922976/Photos/1.png) I wonder if I could change this in some way. Is this because pdf vectors are just better quality ? Or is this because chrome renders svg in lower quality than adobe reader renders pdf ? Is this a setting in the svg file that I could change ? Here is the pdf file: https://dl.dropboxusercontent.com/u/58922976/syllabusLinAlg2012.59.pdf And here is the svg file: (https://dl.dropboxusercontent.com/u/58922976/syllabusLinAlg2012.59.svg) I've made this svg file in illustrator, and only chrome is able to use the embedded svg fonts. So firefox and internet explorer won't give the expected result.

    Read the article

  • SVG <image> doesn't work in <defs> on Chrome

    - by avladev
    I want to use image in a group definded in defs tag. But on Chrome nothing works. In Firefox only the .png file is displayd. Only Rectangle apears but with strange bug in Chrome. Is this is supported by SVG or im not using it right. plane.svg <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg baseProfile="full" width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <defs> <g id="car"> <rect x="0" y="0" width="30" height="30" fill="#ff0000" /> <image xlink:href="items/car.svg" x="0" y="0" width="30" height="30" /> <image xlink:href="items/t6k.png" x="100" y="100" width="140" height="140" /> </g> </defs> <use xlink:href="#car" x="0" y="0" width="600" height="600" /> </svg> images/car.svg <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg baseProfile="full" width="30" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <rect x="0" y="0" width="30" height="30" fill="red" stroke="green" stroke-width="3"/> </svg> Download code: http://www.4shared.com/file/9gNi5gCO/svg_bug.html

    Read the article

  • Combining Multiple SVG Transformations

    - by Andi
    I'm new to Snap.svg and SVG and experimenting with transformations (an illustraiting plunk can be found here). Basically I'm trying to move, scale and rotate a shape according to its configuration. This is what I've found out so far: rotating around a point is possible with rotate(angle, x, y) there is no direct transform method to scale around a point but it can be done as described in "SVG Essentials" However combining these transforms doesn't give me the expected result - my expected calculated center of the shape differs from the rendered one. Can anyone give me some pointers on how to correctly put these transforms together? Regards, Andi

    Read the article

  • Crashing .svg in Nautilus

    - by rjbgbo
    It happens sometimes, but I've managed to restore the Nautilus without rebooting the system.But today, when I attached a file .svg by e-mail, he first caught the Google Chrome and then Firefox 5, and when I open the folder in Nautilus Ubuntu crashed. Making me to restart the PC via Alt + SysRq + B. I know there is a bug related to it, and I also know that there is no preview thumbnails for Nautilus, but that could be set up so only thumbnails of files .svg did not appear?

    Read the article

  • Should I use SVG for icons? [on hold]

    - by Nick Maddren
    I'm just wondering what is the preferred practice for adding icons? I see quite a bit of hype over SVG images however having a bit of trouble understanding how they are implemented as every article I read seems out of date. I need icons for simple lists, the icons need to be one solid color. I feel as if using png's was so 2008 haha, would you recommend the use of SVG images or are developers using other methods to display icons now?

    Read the article

  • Render SVG font in Adobe Illistrator or Corel Draw

    - by Viktor Burdeinyi
    Hello! I'm developing a project that produces SVG files with custom embed fonts. SVG font definition I compose as SVG font tag with help of http://www.fontsquirrel.com/fontface/generator or Batik SVG Toolkit. The resulted SVG file I try to open in following applications: Adobe Illustrator CS4 - text has default font and message noticed about font not found in system CorelDRAW X5 - text has default font and any messages don't noticed Batik SVG Browser (Squiggle) - renders text correctly The problem is all modern typographies use CorelDRAW and Abode Illustrator for print vector graphic and them render not correctly SVG. Solution As for me, I see follow solutions: Save the text with custom font as SVG path. This will work but, I can't find any solution that can convert text + TTF to SVG path data; Use other vector format, f.e. AI, EPS or CDR. This solution is difficult for me, because I use SVG paths as part of input data; Recommend our users to use Batik SVG Browser (Squiggle) or any other application which are based on Batik SVG Toolkit library. Batik SVG Toolkit requires Java runtime :( If anyone know some knowledge to open SVG embed fonts in Adobe Illustrator or CorelDRAW please share them. I would be grateful for any help. Thank you. -Viktor Burdeinyi

    Read the article

  • Adobe Illustrator can't open SVG file

    - by themapguyde
    I have a generated SVG file which for some reason won't open in Adobe Illustrator when I serve the file content from my ASP.net application, but if I were to write this generated file directly to the file system from my ASP.net application, the file opens fine! I've put a zip of the two files here: http://dl.dropbox.com/u/1761973/Files.zip The zip has two files: Map.svg Test.svg Map.svg doesn't open in Illustrator, it shows up a Text Import Options dialog, and upon clicking OK, will show the XML content of the file. Test.svg opens fine in Illustrator. Doing a comparison of the two files yields NO DIFFERENCES whatsoever! There must be something different in these two files (caused by downloading the generated SVG from the web browser), but I have no idea what?

    Read the article

  • Converting SVG to UFO files

    - by Supuhstar
    I am working in PhotoImpact X3, whose native file format is .UFO. I want to bring an SVG file into it, but it doesn't recognize SVG format. All online converters I find (trying to convert it to .PSD, which PhotoImpact X3 recognizes) convert the SVG to a raster format, first, and I don't want that. Does anyone know a way to import an SVG file into PhotoImpact X3? Preferably as a .UFO or .PSD file, but any scaleable vector file format will work.

    Read the article

  • How to access SVG elements with Javascript

    - by gargantaun
    I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning of the file that I've removed) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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" width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242" xml:space="preserve"> <path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037 c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185 L34.074,86.094z"/> <path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074 l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741 l-19.259-39.259L92.593,8.316L68.148,32.761z"/> <polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/> <path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593 l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444 l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/> </svg> As you can probably see, each element has an ID, and I was hoping to be able to access individual elements with Javascript so I could change the Fill attribute and respond to events such as click. The HTML is bog basic <!DOCTYPE html> <html> <head> <title>SVG Illustrator Test</title> </head> <body> <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object> </body> </html> I guess this is two questions really. a) Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG. b) If it is possible, what's the technique?

    Read the article

  • SVG: About using <defs> and <use> with variable text values

    - by Lukman
    Hi, I have the following SVG source code that generates a number of boxes with texts: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> <defs> </defs> <title>Draw</title> <g transform="translate(50,40)"> <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> <text text-anchor="middle" x="40">Text</text> </g> <g transform="translate(150,40)"> <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> <text text-anchor="middle" x="40">Text 2</text> </g> <g transform="translate(250,40)"> <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> <text text-anchor="middle" x="40">Text 3</text> </g> </svg> As you can see, I repeated the <g></g> three times to get three such boxes, when SVG has <defs> and <use> elements that allow reusing elements using id references instead of repeating their definitions. Something like: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> <defs> <marker style="overflow:visible;fill:inherit;stroke:inherit" id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto"> <path transform="scale(0.4) rotate(180) translate(20,0)" style="fill-rule:evenodd;stroke-width:2.0pt;marker-start:none;" d="M 0.0,-15.0 L -20.5,0.0 L 0.0,15.0 "/> </marker> <line marker-end="url(#Arrow1Mend)" id="systemthread" x1="40" y1="10" x2="40" y2="410" style="stroke: black; stroke-dasharray: 5, 5; stroke-width: 1; "/> </defs> <title>Draw</title> <use xlink:href="#systemthread" transform="translate(50,40)" /> <use xlink:href="#systemthread" transform="translate(150,40)" /> <use xlink:href="#systemthread" transform="translate(250,40)" /> </svg> Unfortunately I can't do this with the first SVG code since I need the texts to be different for each box, while the <use> tag simply duplicates 100% what's defined in <defs>. Is there any way to use <defs> and <use> with some kind of parameters/arguments mechanism like function calls?

    Read the article

  • Actionscript 3 svg XML parsing bug?

    - by Mahir
    Hey I get two different results when using the for each loop below. As far as I can tell there's no difference aside from attributes in the two XML literals. for each (var pathXML:XML in svg.path) { // do stuff... trace(pathXML.@stroke) } // This one works, the loop iterates once over the single path element... var svg:XML = <svg> <path stroke="#00FF00" /> </svg> // This one doesn't, the loop just exits. var svg:XML = <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" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve"> <path fill="#FFFFFF" stroke="#000000" d="M160.333,372.444c0,0,17.778-115.555,60-63.333s27.778-106.666,78.889,40" /> </svg>

    Read the article

  • Illustrator CS4: SVG Export error "Transforms are Expanded"??

    - by neezer
    I get the following error when trying to save my image to SVG (via "Save Copy As"): Transforms are expanded. When I try to load the SVG in another program, all I get is a blank canvas. I ultimately want the path data to feed into RaphaelJS, but the path data that I got by clicking on the Show Code button during the SVG export also yields a blank canvas with RaphaelJS (and I've verified that RaphaelJS is loaded, and it is rendering properly). I'm convinced that this export error in Illustrator is the problem, but I can't figure out how to make it go away and export my SVG graphic properly. Can anyone help? Thanks!

    Read the article

  • Illustrator CS4: SVG Export error "Transforms are Expanded"?

    - by neezer
    I get the following error when trying to save my image to SVG (via "Save Copy As"): Transforms are expanded. When I try to load the SVG in another program, all I get is a blank canvas. I ultimately want the path data to feed into RaphaelJS, but the path data that I got by clicking on the Show Code button during the SVG export also yields a blank canvas with RaphaelJS (and I've verified that RaphaelJS is loaded, and it is rendering properly). I'm convinced that this export error in Illustrator is the problem, but I can't figure out how to make it go away and export my SVG graphic properly. Can anyone help? Thanks!

    Read the article

  • Insert SVG directly into Microsoft Publisher without converting file format

    - by nhinkle
    How can I insert an SVG image into a Microsoft Publisher 2010 document as a vector image without having to first convert it to a bitmap format like PNG? Copying and pasting an SVG file into a Publisher document does not work. I am aware that one can convert an SVG to EPS, and insert that, since Publisher accepts EPS files. The problem is that it is time consuming to convert, and often the colors come out wrong. If this is the only way to get vector graphics into Publisher, then is there a one-step method to convert an SVG to EPS and paste it into Publisher at one fell swoop?

    Read the article

  • Designing entire webpages as SVG files

    - by user1311390
    Disclaimer I realize that given the absurdity of the title, this sounds like a troll. However, it's a genuine question. My background involves OpenGL / x86 assembly. I've recently started learning web programming. I really like SVG + CSS, and was wondering -- why do people not design entire webpages in SVG? Context SVG provides beautiful primitive: quadratic + cubic bezier curves; lines + filling -- all as vector graphics SVG provides text SVG provides affine transformations Questions Are there examples of people designing entire websites as a giant SVG file? If not, what the limitations? Are there performance hits when using SVG primitives as opposed to divs/tables?

    Read the article

  • Problem saving as png a SVG generated by Raphael JS in a canvas

    - by ClemDesm
    Hi fellow SOers, I'm trying to convert a SVG generated by Raphael JS (and the user, since you can drag and rotate the images). I followed this Conversion of SVG to Jpeg but still can't get it. It must be easy but I can't put my finger on what I get wrong. I got my svg in a div with #ec as id and the canvas's one is #canvas. function saveDaPicture(){ var img = document.getElementById('canvas').toDataURL("image/png"); $('body').append('<img src="'+img+'"/>'); } $('#save').click(function(){ var svg = $('#ec').html(); alert(svg); canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); }); The alert gives me : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"> <desc>Created with Raphael</desc> <defs></defs> <image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image> <rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect> <circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle> <image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image> <image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image> <image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> <image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> <image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image> </svg> which is the xml of the svg and if I believe canvg documentation, it's good. Anyway, with this code, the variable img, which should have the converted image data, got the data of an empty png with the dimensions of the svg. The only thing I guess is that the svg generated by Raphael JS is not well formated for canvg (like, href of image should be xlink:href if I follow the W3C recommandations ) Anyone got an idea on this problem ? :D

    Read the article

  • How to render 3D models as SVG vector graphics? (planar projection)

    - by Jan
    This image (original SVG from Wikipedia, public domain) was created using the following procedure: Create a 3D model in Google sketchup Export as PDF Import in Inkscape Save as SVG Is there a straightforward way to produce such a SVG with software that runs (natively) on Ubuntu? (Pantograph, a Blender plugin, has only broken download links; VRM, another Blender plugin works with Belnder 2.4x, but not with Blender 2.6x.)

    Read the article

  • javascript replace text with images problem

    - by Amit Malhotra
    I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!! Basically, I'm trying to change every instance of a card type with an image on a webpage Here's the code: window.onload = function(){ var cardname = new Array(); cardname[0] = "Ace of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a.svg.png' />"; cardname[1] = "2 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_2.svg/88px-Ornamental_h_2.svg.png' />"; cardname[2] = "3 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_3.svg/88px-Ornamental_h_3.svg.png' />"; cardname[3] = "4 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_4.svg/88px-Ornamental_h_4.svg.png' />"; cardname[4] = "5 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_5.svg/88px-Ornamental_h_5.svg.png' />"; cardname[5] = "6 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_6.svg/88px-Ornamental_h_6.svg.png' />"; cardname[6] = "7 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_7.svg/88px-Ornamental_h_7.svg.png' />"; cardname[7] = "8 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_8.svg/88px-Ornamental_h_8.svg.png' />"; cardname[8] = "9 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_9.svg/88px-Ornamental_h_9.svg.png' />"; cardname[9] = "10 of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Ornamental_h_10.svg/88px-Ornamental_h_10.svg.png' />"; cardname[10] = "Jack of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_j.svg/88px-Ornamental_h_j.svg.png' />"; cardname[11] = "Queen of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_q.svg/88px-Ornamental_h_q.svg.png' />"; cardname[12] = "King of Hearts^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_h_k.svg/88px-Ornamental_h_k.svg.png' />"; cardname[13] = "Ace of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_a.svg/88px-Ornamental_s_a.svg.png' />"; cardname[14] = "2 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_2.svg/88px-Ornamental_s_2.svg.png' />"; cardname[15] = "3 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_3.svg/88px-Ornamental_s_3.svg.png' />"; cardname[16] = "4 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_4.svg/88px-Ornamental_s_4.svg.png' />"; cardname[17] = "5 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_5.svg/88px-Ornamental_s_5.svg.png' />"; cardname[18] = "6 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_6.svg/88px-Ornamental_s_6.svg.png' />"; cardname[19] = "7 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_7.svg/88px-Ornamental_s_7.svg.png' />"; cardname[20] = "8 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_8.svg/88px-Ornamental_s_8.svg.png' />"; cardname[21] = "9 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_9.svg/88px-Ornamental_s_9.svg.png' />"; cardname[22] = "10 of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_10.svg/88px-Ornamental_s_10.svg.png' />"; cardname[23] = "Jack of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Ornamental_s_j.svg/88px-Ornamental_s_j.svg.png' />"; cardname[24] = "Queen of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_q.svg/88px-Ornamental_s_q.svg.png' />"; cardname[25] = "King of Spades^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_s_k.svg/88px-Ornamental_s_k.svg.png' />"; cardname[26] = "Ace of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_a.svg/88px-Ornamental_c_a.svg.png' />"; cardname[27] = "2 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_2.svg/88px-Ornamental_c_2.svg.png' />"; cardname[28] = "3 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_3.svg/88px-Ornamental_c_3.svg.png' />"; cardname[29] = "4 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_4.svg/88px-Ornamental_c_4.svg.png' />"; cardname[30] = "5 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_5.svg/88px-Ornamental_c_5.svg.png' />"; cardname[31] = "6 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_6.svg/88px-Ornamental_c_6.svg.png' />"; cardname[32] = "7 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_7.svg/88px-Ornamental_c_7.svg.png' />"; cardname[33] = "8 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_8.svg/88px-Ornamental_c_8.svg.png' />"; cardname[34] = "9 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_9.svg/88px-Ornamental_c_9.svg.png' />"; cardname[35] = "10 of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_10.svg/88px-Ornamental_c_10.svg.png' />"; cardname[36] = "Jack of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_j.svg/88px-Ornamental_c_j.svg.png' />"; cardname[37] = "Queen of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_q.svg/88px-Ornamental_c_q.svg.png' />"; cardname[38] = "King of Clubs^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_c_k.svg/88px-Ornamental_c_k.svg.png' />"; cardname[39] = "Ace of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_a.svg/88px-Ornamental_d_a.svg.png' />"; cardname[40] = "2 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_2.svg/88px-Ornamental_d_2.svg.png' />"; cardname[41] = "3 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_3.svg/88px-Ornamental_d_3.svg.png' />"; cardname[42] = "4 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_4.svg/88px-Ornamental_d_4.svg.png' />"; cardname[43] = "5 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_5.svg/88px-Ornamental_d_5.svg.png' />"; cardname[44] = "6 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_6.svg/88px-Ornamental_d_6.svg.png' />"; cardname[45] = "7 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_7.svg/88px-Ornamental_d_7.svg.png' />"; cardname[46] = "8 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_8.svg/88px-Ornamental_d_8.svg.png' />"; cardname[47] = "9 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_9.svg/88px-Ornamental_d_9.svg.png' />"; cardname[48] = "10 of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_10.svg/88px-Ornamental_d_10.svg.png' />"; cardname[49] = "Jack of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_j.svg/88px-Ornamental_d_j.svg.png' />"; cardname[50] = "Queen of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_q.svg/88px-Ornamental_d_q.svg.png' />"; cardname[51] = "King of Diamonds^<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamental_d_k.svg/88px-Ornamental_d_k.svg.png' />"; var j, k, findit, part, page, repl; var page = document.body.innerHTML; for(var i=0; i<cardname.length; i++){ part = cardname[i].split("^"); findit = part[0]; repl = part[1]; while (page.indexOf(findit) >=0){ var j = page.indexOf(findit); var k = findit.length; page = page.substr(0,j) + repl + page.substr(j+k); } } document.body.innerHTML = page; } any help would be appreciated to figure out why this code is not working!

    Read the article

  • XPointers in SVG

    - by Nycto
    I've been trying to get XPointer URIs working in an SVG file, but haven't had any luck so far. After trying something more complicated and failing, I simplified it down to just referencing an ID. However, this still fails. The spec seems pretty clear about this implementation: http://www.w3.org/TR/SVG/struct.html#URIReference I found an example online of what should be a working XPointer reference within an svg document. Here is the Original. Here is the version I copied out: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="500" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <rect id="simpleRect" width="100px" height="75px"/> </defs> <use xlink:href="#simpleRect" x="50" y="50" style="fill:red"/> <use xlink:href="#xpointer(id('simpleRect'))" x="250" y="50" style="fill:yellow"/> </svg> This should display two rectangles... one red and one yellow. I tried rendering with Firefox 3.6 and Inkscape 0.47. No success. Only the Red rectangle shows. What am I missing? Thanks for any help you can offer

    Read the article

  • SVG as CSS background for website navigation-bar

    - by Irfan Mir
    I drew a small (horizontal / in width) svg to be the background of my website's navigation. My website's navigation takes place a 100% of the browser's viewport and I want the svg image to fill that 100% space. So, using css I set the background of the navigation (.nav) to nav.svg but then I saw (whenI opened the html file in a browser) that the svg was not the full-width of the nav, but at the small width I drew it at. How can I get the SVG to stretch and fill the entire width of the navigation (100% of the page) ? Here is the code for the html file where the navigation is in: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Distributed Horizontal Menu</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> *{ margin:0; padding:0; } .nav { margin:0; padding:0; min-width:42em; width:100%; height:47px; overflow:hidden; background:transparent url(nav.svg) no-repeat; text-align:justify; font:bold 88%/1.1 verdana; } .nav li { display:inline; list-style:none; } .nav li.last { margin-right:100%; } .nav li a { display:inline-block; padding:13px 4px 0; height:31px; color:#fff; vertical-align:middle; text-decoration:none; } .nav li a:hover { color:#ff6; background:#36c; } @media screen and (max-width:322px){ /* styling causing first break will go here*/ /* but in the meantime, a test */ body{ background:#ff0000; } } </style></head><body> <ul class="nav"> <!--[test to comment out random items] <li>&nbsp; <a href="#">netscape&nbsp;9</a></li> [the spacing should be distributed]--> <li>&nbsp; <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li> <li>&nbsp; <a href="#">opera&nbsp;10</a></li> <li>&nbsp; <a href="#">firefox&nbsp;3</a></li> <li>&nbsp; <a href="#">safari&nbsp;4</a></li> <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp; &nbsp;</li> </ul> </body></html> and Here is the code for the svg: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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" width="321.026px" height="44.398px" viewBox="39.487 196.864 321.026 44.398" enable-background="new 39.487 196.864 321.026 44.398" xml:space="preserve"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="280" y1="316.8115" x2="280" y2="275.375" gradientTransform="matrix(1 0 0 1 -80 -77)"> <stop offset="0" style="stop-color:#5A4A6A"/> <stop offset="0.3532" style="stop-color:#605170"/> <stop offset="0.8531" style="stop-color:#726382"/> <stop offset="1" style="stop-color:#796A89"/> </linearGradient> <path fill="url(#SVGID_1_)" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316 c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027V238.721z"/> <path opacity="0.1" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028 v39.316c0,1.12,0.812,2.028,1.813,2.028h316.375c1,0,1.812-0.908,1.812-2.028v-39.316C360,198.284,359.189,197.376,358.188,197.376z M358.75,238.721c0,0.415-0.264,0.779-0.562,0.779H41.813c-0.3,0-0.563-0.363-0.563-0.779v-39.316c0-0.414,0.263-0.777,0.563-0.777 h316.375c0.301,0,0.562,0.363,0.562,0.777V238.721z"/> <path opacity="0.5" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028v1.461 c0-1.12,0.812-2.028,1.813-2.028h316.375c1.002,0,1.812,0.908,1.812,2.028v-1.461C360,198.284,359.189,197.376,358.188,197.376z"/> <g id="seperators"> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="104.5" y1="197.375" x2="104.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="103.5" y1="197.375" x2="103.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="105.5" y1="197.375" x2="105.5" y2="240.75"/> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="167.5" y1="197.375" x2="167.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="166.5" y1="197.375" x2="166.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="168.5" y1="197.375" x2="168.5" y2="240.75"/> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="231.5" y1="197.375" x2="231.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="232.5" y1="197.375" x2="232.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="230.5" y1="197.375" x2="230.5" y2="240.75"/> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="295.5" y1="197.375" x2="295.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="294.5" y1="197.375" x2="294.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="296.5" y1="197.375" x2="296.5" y2="240.75"/> </g> <path fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029 H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027 V238.721z"/> </svg> I appreciate and welcome any and all comments, help, and suggestions. Thanks in Advance!

    Read the article

  • SVG to JPEG/BMP conversion

    - by stanigator
    I have a svg file that I want to convert to jpeg or bmp (or any other image formats). However, all the conversions that I have used on the various online tools yielded very unclear output images. I don't want to use svg as it is very inconvenient. What would be your suggestions to get around that?

    Read the article

1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >