Question

I am implementing a customized version of SVG-edit for a project that needs to be able to edit very basic SVG files. The requirement is for the text in these SVG files to be editable, but not the images.

So, a common example of one of these files would have a text element at the top, and an image element below that. Is there any attribute I can add to the image element, and consequently any config I can make on the javascript editor itself, to prevent the user from making changes to the image element?

(Obviously I’m able to achieve this without the use of SVG-edit. Ie. simply having a TextBox for the user’s input, and replacing the text element on the SVG with its value, but that’s ugly.)

Any help greatly appreciated..

Answer 1

To SVG Edit all your SVG DOM is editable, and even if there was an attribute such as readonly SVG Edit would ignore it unless you implemented it yourself.

I have my own implementation of SVG Edit too, and I happened to come across a similar use case as your own. What I did was hide the layers panel and place the editable content on the topmost layer. This way users don’t have access to the underlying layers. You must modify your SVG files to look something like this…

<svg xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>Layer 1</title>
      <!-- NON EDITABLE CONTENT -->
    </g>
    <g>
      <title>Layer 2</title>
      <!-- YOUR TEXT ELEMENTS -->
    <g>
</svg>

Then you just hide the layers panel with some CSS

#svg_editor #sidepanels {
  display: none;
}

http://tinyurl.com/9q9s7d9

(URL links to trunk build of SVG Edit, but it’s shortened because it loads an encoded SVG string)