2 Replies Latest reply on Jun 11, 2018 3:17 PM by newty25

    SVG Resizing on Breakpoint Issue

    Rhizome Consulting Level 1

      Hello everyone,


      I have a Fluid width site that uses a SVG in a tabbed panel. At the max breakpoint, 1200 px, the image looks good. But when the page width is reduced and the new breakpoints come into play, the bounding box for the SVG resizes correctly as laid out in Design Mode, but the SVG does not scale down to these new dimensions.

      Any idea of a workaround? Or do SVGs just not play nice across breakpoints?


      Site: http://www.rhizomeconsulting.com/nucleusresearch/sandbox/http://www.rhizomeconsulting.com/nucleusresearch/sandbox

      Section: The Value Matrices: Industry By Industry


      Attached images show SVG graphic correctly positioned, sized and loaded in Design Mode. Then final attachment shows in browser, not loading correctly.





      Screen Shot 2018-02-28 at 4.08.31 PM.png


      Screen Shot 2018-02-28 at 4.08.39 PM.png



      Screen Shot 2018-02-28 at 4.08.49 PM.png




      Screen Shot 2018-02-28 at 4.11.37 PM.png




      Screen Shot 2018-02-28 at 4.10.51 PM.png

        • 1. Re: SVG Resizing on Breakpoint Issue
          Preran Adobe Employee

          Not the exact answer to your question but can you read the info in the section How to Scale SVG to Fit the Available Width (and adjust the height to match) in How to Scale SVG | CSS-Tricks  to see if it provides insights into what could be going wrong with your SVG.


          Also see Process and import SVG graphics in Adobe Muse




          • 2. Re: SVG Resizing on Breakpoint Issue
            newty25 Level 1

            For those that may have stumbled upon this because you're experiencing the same issue.


            I was having this problem as well.


            From Illustrator, I was copying the assets to mylibrary and then directly importing them into Muse (drag and drop). Much easier than exporting the asset to your hard drive when you can just drag it to the cloud and then drag it from the cloud in a different app, IMO.


            Anyways, the image seemed to be anchored to the left of the frame it was in. So, I created an image frame, cut the image from the Muse page, and pasted it as background to the image frame. As the image frame resizes, the image now stays centered.

            1 person found this helpful