Svg-edit

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
josegaert's picture

Dear all,

I want to advertise my project,
http://drupal.org/sandbox/josegaert/1511596

It is still experimental and there are not yet any validations so it is vulnerable to XSS-attacks.

Installing this project gives you 3 modules.

  • Svg: Gives you a new field in which you can enter svg-code and it is rendered as an image.
  • Svgedit: Expands the svg-module to change your svg-picture with the open source web-based vector editor: svg-edit. This is the reason that I began this project.
  • Nounproject: Adds a new widget that allows the user to chose svg-images from the Noun Project website using the Noun Project search API.

Well, I hope this can help you with some of your projects.

Comments

I'm interested in this.

johnflower's picture

I'm interested in this.

I'm about to upload a serious

josegaert's picture

I'm about to upload a serious improvement! There will almost be no difference in handling pictures (with the image module) or svg images (with my module). Help and code revision is always welcome!

Is that to GIT, through the

johnflower's picture

Is that to GIT, through the sandbox? I'm not the cleverest of cookies, but I would like to try it out. Any chance you can email it to john#johnflower.org? I already had svg as an allowed file type for image fields, most miffed when it wouldn't allow me to use them :).

I've sent you the latest

josegaert's picture

I've sent you the latest version. But I'll retake some of my comments here for possible other git users.

First and for all, you cannot yet upload svg's that have not an length and width defined. I still have to get that bug out.
Also the module nounproject does not yet work.

And if you know how to handle drush you can use the svgedit.make file.
If not, you'll have to place (unpack) the latest version of svgedit (or any version actually) in /sites/all/libraries/svgedit.

Have fun!

Inserting an SVG image works.

johnflower's picture

Inserting an SVG image works. See:- http://johnflower.org/test-content-type/svg-test

I created an SVG field, as I would any other field, uploaded an SVG image, the image rendered on a node as I expected it to. I have not tested anything else. It was easy to do.

The SVG I used was created in Inkscape, on Fedora 15.

Well done :)

Also tested with imagecache

johnflower's picture

Also tested with image style presets, views, and block. See block at bottom of http://johnflower.org/test-content-type/svg-test

Works as it should.

Doesn't work with image formatters such as Flexslider, Galleria, Gallery Formatter, or Colorbox :(.

Would be cool if it worked

johnflower's picture

Would be cool if it worked with Insert and Resize modules too.

SVG Edit doesn't work for me

johnflower's picture

The icons are missing. The buttons work though, I can draw stuff. But Save doesn't save the file. I can't get the image back to Drupal. I installed SVG Edit (2.5.1). See screenie at http://johnflower.org/test-content-type/svg-test#comment-111

You can test this by adding a comment on http://johnflower.org/test-content-type/svg-test and using the SVG Edit option. I added an SVG field to the comment, works fine for uploading a file though.

I'm using FF 12.0 on MacOS Lion.

Dear John, First, concerning

josegaert's picture

Dear John,

First, concerning the icons-are-missing-and-it-does-not-save problem of SVG Edit. I had that problem too, but I didn't found an answer before. Now you've forced me to find it out and it is a permissions problem. It seems that only the owner of the files of the svg-edit is able to navigate the directories (permission 700). People who use the trunk version of SVG Edit 2.6 don't have that problem. To solve it, navigate to sites/all/libraries/svgedit and execute following in your Terminal.

find . -type d -exec chmod 0755 {} \;

After that, non owners of the files, like the virtual apache user, will also be able to navigate the files. Before apache wasn't able to do that and so you got a 403:forbidden error.
I hope this solves the svg-edit problem.

Second, I'm going to check out what has to be changed to get it to work with modules like Flexslider, Galleria, Gallery Formatter, Colorbox, Insert and Resize. But I fear that it will require a lot of work because the handling vector images and raster images is completely different.

SVG Edit Perms

johnflower's picture

I've changed the perms, flushed FF's cache, no joy :(. Is it possible to send users to the editor hosted at Google, rather than installing it in /sites/all/libraries/ ? I also tried getting the trunk version, but I'm not clever enough to download it as a package (though maybe I could download the files individually?).

Is it possible to tweak a Colorbox-like script to work with SVG and combine that with your module? Maybe this would be easier than trying to make it mix with raster images. I'm thinking that it maybe nice to have a way to enlarge the image, other than using Ctrl +.

Is it within the scope of your module to make text in an SVG image highlightable, so that it can be copied and pasted like normal HTML text? Or is this something that has to be done at a lower level?

Feature requests

johnflower's picture

Support for

File (Field) Paths Module
Alt Text
Title Text

Image doesn't scale as browser window changes

johnflower's picture

It'd be nice if the SVGs would scale, can something like

svg {
    max=width: 100%;
}

be used?

Issue Queue

josegaert's picture

Thank you for all the ideas!
maybe you could add as feature requests to the issue queue under your name so that you stay up to date when something changes.

http://drupal.org/project/issues/1511596?status=All&categories=All

Graphing & SVG

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week