Loading ...
Sorry, an error occurred while loading the content.

Gradient Definitions problem

Expand Messages
  • adrianbjones
    Hi everyone, Our research group currently offers a library of free vector symbols for assisting in communication of environmental science issues. All the
    Message 1 of 4 , Jan 8, 2007
    • 0 Attachment
      Hi everyone,

      Our research group currently offers a library of free vector symbols
      for assisting in communication of environmental science issues. All
      the artwork has been created in Illustrator and they have been
      primarily offered in this format, however we also offer SVG versions,
      and I would like to make this the default format. However, I have been
      recently playing with the symbols in Inkscape and noticed an
      interesting problem.

      If you combine several of the symbols into a diagram there is often a
      problem with gradient definitions. If the ID of the linearGradient is
      the same for two of the symbols that are placed into the one diagram,
      but the gradients are actually different, then one definition will
      override all of the others and all the symbols will show that gradient
      where the ID is the same.

      I hope this makes sense - I have Googled far and wide for some
      discussion on this, but haven't been able to come up with anything.
      Does anyone know a way to avoid this problem? It seems to me that it
      would mean having a unique linearGradient ID but this would be
      virtually impossible to ensure when we have over 1500 symbols.
      Otherwise, is there a way to prevent linear gradients from being
      defined at all. In other words, is it possible to have the gradient
      instructions as part of each path fill. I realize this may result in a
      larger file, but would avoid the problems I have described.

      I would really appreciate any suggestions anyone has.

      Thanks,
      Adrian
    • Bjoern Hoehrmann
      ... IDs have to uniquely identify one element in a document, you either have to actually use unique ones, or you have to put them in separate documents. What
      Message 2 of 4 , Jan 8, 2007
      • 0 Attachment
        * adrianbjones wrote:
        >Otherwise, is there a way to prevent linear gradients from being
        >defined at all. In other words, is it possible to have the gradient
        >instructions as part of each path fill. I realize this may result in a
        >larger file, but would avoid the problems I have described.

        IDs have to uniquely identify one element in a document, you either
        have to actually use unique ones, or you have to put them in separate
        documents. What you suggest above is possible though not easy to
        author and presumably not well-supported using the 'data' URL scheme:

        <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
        <rect height='100' width='100' fill='url(data:image/svg+xml;base64,
        PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249J
        zEuMSc+CiAgPGxpbmVhckdyYWRpZW50IGlkPSdleGFtcGxlJz4KICAgIDxzdG9wIG
        9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGNjAiIC8+CiAgICA8c3RvcCBvZmZzZXQ
        9IjEwMCUiIHN0b3AtY29sb3I9IiNGRjYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4K
        PC9zdmc+#example)' />
        </svg>

        This should render as a rect with a orange to yellow gradient. However,
        I am not aware of a single SVG implementation capable of rendering this
        as required by the SVG 1.1 specification. So you will have to find some
        way to make your IDs unique.
        --
        Björn Höhrmann · mailto:bjoern@... · http://bjoern.hoehrmann.de
        Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
        68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
      • adrianbjones
        ... Hi Bjorn - thanks. I had played with data url scheme a little using the SVG Tiny export option in Illustrator. The difference with that function is that it
        Message 3 of 4 , Jan 8, 2007
        • 0 Attachment
          > IDs have to uniquely identify one element in a document, you either
          > have to actually use unique ones, or you have to put them in separate
          > documents. What you suggest above is possible though not easy to
          > author and presumably not well-supported using the 'data' URL scheme:
          >
          > <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
          > <rect height='100' width='100' fill='url(data:image/svg+xml;base64,
          > PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249J
          > zEuMSc+CiAgPGxpbmVhckdyYWRpZW50IGlkPSdleGFtcGxlJz4KICAgIDxzdG9wIG
          > 9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGNjAiIC8+CiAgICA8c3RvcCBvZmZzZXQ
          > 9IjEwMCUiIHN0b3AtY29sb3I9IiNGRjYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4K
          > PC9zdmc+#example)' />
          > </svg>
          >
          > This should render as a rect with a orange to yellow gradient. However,
          > I am not aware of a single SVG implementation capable of rendering this
          > as required by the SVG 1.1 specification. So you will have to find some
          > way to make your IDs unique.


          Hi Bjorn - thanks.

          I had played with data url scheme a little using the SVG Tiny export
          option in Illustrator. The difference with that function is that it
          uses a PNG file for the gradient which obviously is not very effective
          since we are after a completely vector format. The code you suggested
          makes sense, but as you said, really can't be properly rendered by any
          software yet. So I guess it does mean that I am stuck with ensuring
          unique IDs, but as you can imagine this is a huge task across 1500
          symbols, and of course users may also want to add their own SVG
          graphics together with our symbols into the one diagram/illustration,
          which may once again result in matching IDs where they are indeed
          distinct gradients.

          I would suggest that perhaps this is a deficiency in SVG that will
          catch many people by surprise and in the case of complicated
          illustrations, make it very difficult to combine graphics into the one
          file. Does anyone think this 'problem' is worth reporting to the SVG
          Working Group?

          Thanks,
          Adrian
        • ddailey
          adrianbjones wrote: So I guess it does mean that I am stuck with ensuring unique IDs, but as you can imagine this is a huge task across 1500 symbols, and of
          Message 4 of 4 , Jan 9, 2007
          • 0 Attachment
            adrianbjones wrote:

            "So I guess it does mean that I am stuck with ensuring
            unique IDs, but as you can imagine this is a huge task across 1500
            symbols, and of course users may also want to add their own SVG
            graphics together with our symbols into the one diagram/illustration,
            which may once again result in matching IDs where they are indeed
            distinct gradients. "

            It would not be difficult to write a script to find all the relevant content (presumably gradients) in the SVG document and then simply to stamp each with a unique id. You'd need a programmer with SVG experience and I'm not sure how common that species is. If the final destination is the web, then the browser could run the script. If the final destination is Inkscape, I don't think it has a scripting engine underneath so you'd have to pre-process somewhere else like PHP or Batik or something.

            "I would suggest that perhaps this is a deficiency in SVG that will
            catch many people by surprise and in the case of complicated
            illustrations, make it very difficult to combine graphics into the one
            file. Does anyone think this 'problem' is worth reporting to the SVG
            Working Group?"

            The separation of SVG's fill definitions, like gradients, from its objects, does lead you into the place you find yourself. I think the way SVG does things with id's is consistent with its ordinary purposes and defining context (XML). At the same time, the purpose you've envisioned certainly makes sense to me. If I were doing something like what I gather you are doing, it would be for display on the web and so I would build the interface to the library of images out of HTML and JavaScript, with the JavaScript stamping all and any SVG objects, as needed, with unique id's upon use.

            Apologies if I've misunderstood your issue and I hope the above does not sound too much like gobbledygook.

            David Dailey

            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.