Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Dynamically Change Svg


demiculus
 Share

Recommended Posts

I have many svg files that look alike with a few things different in each of them. Here is an example one.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<polygon fill="#2237FF" stroke="#000B71" stroke-width="30" stroke-miterlimit="10" points="270.073,318.023 270.073,209.126
   319.049,209.126 176.098,57.9 33.148,209.126 82.124,209.126 82.124,462.342 217.969,462.342 270.073,462.342 467.852,462.342 
   467.852,318.023 "/>
</svg>

In pixi.loader I add images like: 

 

PIXI.loader
.add('city_blue', getImagePath('city_blue.svg'),  { crossOrigin: true })
.add('city_red', getImagePath('city_red.svg'), { crossOrigin: true })
.add('city_yellow', getImagePath('city_yellow.svg'), { crossOrigin: true })
.add('city_orange', getImagePath('city_orange.svg'), { crossOrigin: true })
.add('city_green', getImagePath('city_green.svg'), { crossOrigin: true })
.add('city_gray', getImagePath('city_gray.svg'), { crossOrigin: true })
...

The polygon fill & stroke is the only parameters different in this image but my sever needs to load ALL of the images in order for this to work. So my question is 

how can I dynamically change a single svg images parameters so that my website loads faster?

 

 

 

Link to comment
Share on other sites

Hack the loading process. 

For v5:

1. Load one svg

2. Look into SVGResource inside the baseTexture,

3. Figure out where string representation is stored

4. Replace colors

5. Create more SVGResource's.

It requires reading SVGResource and BaseTexture sources. Sorry, cant make links, im on mobile on vacation. We can make hacks and new PRs for that file together :)

Maybe there will be something wrong with  3,4,5 , in that case please investigate all the steps first and then report back here all the problems youve found. 

Even in case of success, please share your solution, ill post it in pixijs wiki.

 

Link to comment
Share on other sites

On 5/2/2019 at 1:30 PM, ivan.popelyshev said:

Hack the loading process. 

For v5:

1. Load one svg

2. Look into SVGResource inside the baseTexture,

3. Figure out where string representation is stored

4. Replace colors

5. Create more SVGResource's.

It requires reading SVGResource and BaseTexture sources. Sorry, cant make links, im on mobile on vacation. We can make hacks and new PRs for that file together :)

Maybe there will be something wrong with  3,4,5 , in that case please investigate all the steps first and then report back here all the problems youve found. 

Even in case of success, please share your solution, ill post it in pixijs wiki.

 

Damn, I've been trying to figure out where SVGResource is for the past 2 hours (also trying other stuff) now realized it was for v5 :(

I'm afraid to upgrade 😰 should I? or wait? 🤔

I'll dig deeper tomorrow

Link to comment
Share on other sites

  • 3 weeks later...

This approach seems to be exactly what I'm after for a similar problem, but not having any joy finding any SVGResource data. Been at it for hours. Any idea?

I can see there's a baseTexture within the texture itself, but no SVGResource nevermind string representation (other than the URL).

I'm on latest v5.

 

Link to comment
Share on other sites

@iamsam in "resource" field of BaseTexture.

How deep are you in pixijs sources at the moment?

Something like combination in looking in variables in runtime and reading source code should work.

I'm sorry but I cant help you guys, I'm too tied with other stuff.

Maybe @JetLu can help you , he's doing those awesome PR's https://github.com/pixijs/pixi.js/pull/5697

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...