inkscape - Page 4 - Developer IT

Animate rotating SVG element on webpage

- by Zarkonnen

So I have an SVG file created in Inkscape embedded in a webpage, and I'd like it to rotate slowly. I've tried using Javascript and inserting animation commands directly into the SVG, but nothing works. I don't want to load in an entire JS library for this one task. This is what I have so far: <html> <body bgcolor="#333333"> <embed src="gear.svg" id="gear" width="1000" height="1000" style="position: absolute; top: -500px; left: -500px;" /> <script type="text/javascript"> var gear = document.getElementById("gear"); window.setInterval(function() { // Somehow animate the gear. }, 10); </script> </body> </html>

Read the article

Methods for making R plots look like Excel plots?

- by brianjd

I've been poking around with R graphical parameters trying to make my plots look a little more professional (e.g., las=1, bty="n" usually help). But not quite there. Started playing with tikzDevice. A huge improvement! Amazing how much better things look when the font sizes and styles in the figure match those of the surrounding document. Still, not quite there. What I'm ultimately looking for are those professional gradient shading, rounded corners, and shadow effects found in MS Excel plots. I know they're probably considered chart junk, but I like them. They're just nice looking. Q: How can I get these effects into my R plots? Do people usually just export to Inkscape and doodle over there? It would be nice if there were a literate programming approach. Is there an R package that handles these effects outright?

Read the article

Are there tools available for trimming PDF margins?

- by Charles Duffy

I have an ebook I'm trying to read in PDF format on a Kindle. Unfortunately, the page headers and footers have some content (page number and copyright info, respectively) preventing the device from scaling the actual text to match its usable area viewing area, thus leaving the actual content too small to read. Various tools are available which will trim off whitespace, but the Kindle already does this; my goal, by contrast, is to remove printed matter outside of a defined bounding box, and the only tool I've found for the purpose is moderately expensive commercial software. I could probably generate a mask in Inkscape; split out the individual pages using pdftk, apply the mask to each page individually (outputting to postscript), and recombine the numerous postscript files into a single PDF. However, this decode/reencode steps would be pretty unfortunate in terms of document size; something able to operate with a bit more finesse would be ideal. I have all major operating systems handy (Windows, several modern Linux distros, a Mac, etc) so solutions don't need to be constrained by platform. Suggestions? (I've reported the issue to the author, who mentioned it to his editor, who hasn't done anything about the issue over the course of more than a month, making the zero-work approach evidently nonproductive).

Read the article

Custom button with property as StaticResource

- by alin

I am trying to achieve the following thing: use an svg image into a custom button. In order to do this I created a Custom button: public class MainButton : Button { static MainButton() { DefaultStyleKeyProperty.OverrideMetadata(typeof(MainButton), new FrameworkPropertyMetadata(typeof(MainButton))); } public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(MainButton), new UIPropertyMetadata("")); public object Image { get { return (object)GetValue(ImageProperty); } set { SetValue(ImageProperty, value); } } public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(object), typeof(MainButton), new UIPropertyMetadata("")); } I took a svg file, opened it in inkscape and saved it as xaml file. I opened Themes.xaml and added the created xaml image as a ControlTemplate And the button style is: Style TargetType="{x:Type local:MainButton}" <StackPanel Canvas.Top="12" Canvas.Left="0" Canvas.ZIndex="2" Width="80"> <ContentControl x:Name="Img" Template="{StaticResource Home}" /> </StackPanel> <StackPanel x:Name="spText" Canvas.Top="45" Canvas.Left="1" Canvas.ZIndex="1" Width="80"> <TextBlock x:Name="Txt" Text="{Binding Path=(local:MainButton.Text), RelativeSource ={RelativeSource FindAncestor, AncestorType ={x:Type Button}}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="14"/> </StackPanel> ... As you can see I have hardcoded the StaticResource name I want to be able to have a binding with property Image on this Template, something like So that I can set the Image property of the button with the name of the StaticResource I want. For example, having beside "Home" image, another one "Back" I would have two buttons in MainWindow declared like this: Any advice is kindly taken. Thank you for your time.

Read the article

CSS to specify positions over a scanned document

- by itsols

I'm trying to write the CSS rules to position text over a scanned document. Reason: The document is a pre-printed form. I am trying to position the text on-screen so that it relates to the 'spaces' on the actual form. Issue: Although I position the values using centimeters, they don't seem to get aligned with the ones on the actual page. I can see this misalignment since my scanned image is in the background of the page. What I've tried: I used a ruler to physically measure the locations and specify them with CSS. But on-screen, it doesn't tally. I used the scanned image to position the CSS values. Then the printout is not correct. I even scaled the scanned page using Inkscape to the exact dimensions in centimeters and took into account all margins, etc... What I need: I am trying to correctly show the output values on-screen AND have them print in the correct manner as well. I know that using two CSS sheets (one for print) is an option. But I'm developing this program away from where the actual printing is to be done. So is there a convenient way of matching the exact screen locations with those on the actual/final prinout? Thanks!

Read the article

SVG rotate deletes Elemets

- by user1468661

I'm trying to generate svg-Code in a web-application. Here's an example output: <?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="1000px" height="600px"> <rect x="147.50198255352893" y="109.43695479777953" width="15.860428231562253" height="295.79698651863595" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 155.43219666931006 257.3354480570975)"/> <rect x="163.36241078509119" y="405.2339413164155" width="379.85725614591587" height="-23.79064234734335" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 353.2910388580491 393.3386201427438)"/> <rect x="543.219666931007" y="381.44329896907215" width="22.204599524187188" height="-353.6875495638382" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 554.3219666931006 204.59952418715304)"/> </svg> There should be three rotated Rectangles, but somehow in Chrome, Safari, and Inkscape only one of them is displayed. I did google and have no clue what is wrong. Thx for your help.

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

Diagramming Software for a Developer/Designer

- by Craig Walker

For a long time I've been looking for a good diagramming/vector-based drawing program that meets my needs as a developer. I'd like to: Draw database diagrams Draw flow charts Draw object-modeling diagrams (UML being the standard) Draw other free-form diagrams (basically boxes & arrows with the occasional clipart) Draw mockups of user interfaces and web pages EDIT: I want good-looking electronic-format diagrams that I can show to 3rd parties, not just something for my own internal use. EDIT 2: I'm also looking for Windows software, although I'm toying with the idea of switching to Mac, so a really good Mac-only product might get me to switch. Basically I need a good vector graphic program (with decent grouping, connecting lines, and ideally auto-routing). I'd prefer a diagramming tool that can also be used for drawing (for the UI mockups) rather than a drawing tool that can also be used for diagrams. I've tried Visio on several occasions, and every time I've been disappointed. The interface always seems to get in my way at some point. It's pretty close to what I want, and the latest version (I got the trail from MS) seems to be better than previous ones in terms of usability, but I really don't want to plunk down that sort of cash for a mediocre product. I've tried Dia and Inkscape, and while initially promising and with the right price tag, I found both of them to be lacking in several ways (including some recurring bugs). I've toyed with getting Adobe Illustrator, but I've never used it before, and I have a feeling that it wouldn't handle the diagramming aspect very well, and I don't want to buy a copy just to find out it doesn't meet my needs. So far, the product that I've had the most success with is, sadly, OpenOffice Draw. It's free of course (which lowers my expectations and thus improves my view of it) and its usability is pretty good, but in the end I'd like something more suited to diagramming. I'm willing to spend real money (in the $500-$1K range) for a really good piece of software if it does everything I want it to. The front runner is of course Visio but I'm hoping for more. Does anybody have any recommendations? CONCLUSION: @dlamblin had the most informative post, but the part I gained the most from was his/her (and others) mention of OmniGraffle, not Gliffy. I gave Gliffy a try, and it seemed neet for occational use, but since it's a Flash app (note: not AJAX as dlamblin mentioned) it's still a bit of a pain to use (no keyboard shortcuts for copy/paste was pretty much a deal breaker for me). I also tried SmartDraw, but it had 3-strikes-you're-out against it: The trial period was only 7 days long. It used some nonstandard (and visually jarring) GUI widget toolkit for its UI. At the very least it makes me suspicious (how do I know it will actually work & support the standard Windows features?) It crashed on me early into my trial. OmniGraffle looks like exactly what I want... except that it's Mac-only (so I couldn't give it a try). However, it got good reviews from my Mac-owning coworker, and I hope to try it on a friend's Mac soon. If it's good enough then I might spring for a new MacBook.

Developer IT