• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

SVG Resizing Inconsistencies

Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

I have a site that's under development that is using two SVG files at the top of the Master page to create a 'wave' like border for the titles.

Both SVG files are loaded in exactly the same way, with same settings, on the master page. The strange thing is the upper banner does not scale to page edges when stretched over 1200px wide, while the lower one does. I can not understand why this is happening.

When I view just the master page as an export, the SVG graphic does stretch across and hold at the page edges above 1200px, but when the site is fully exported, it doesn't.

Can anyone help solve this issue?

Here is the site: www.churchtowndairy.net/sandbox

I'm updating this post with some screenshots of the Muse setup.

Thanks!
Jonney

Screen Shot 2017-11-10 at 11.58.17 AM.png

Screen Shot 2017-11-10 at 11.58.25 AM.png

Screen Shot 2017-11-10 at 11.59.17 AM.png

Views

3.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 10, 2017 Nov 10, 2017

Your export settings look o/k, but just for future reference, to check the viewport settings in an svg, open the svg, (in say Dw) then just below the xml decleration you will see an element named 'viewport', (about 5 lines down). This element will have both the height and width settings, which in order for an svg to be responsive must be % values, (normally both 100%).

Looking at your screen shots, it may be caused by my second point, but also check that your browser cache is not the problem. Chr

...

Votes

Translate

Translate
Adobe Employee ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

I am viewing your site on Chrome (Windows) and I don't see the image stretching in either of the cases. I am hoping that it provides a clue for the experts to help you from here.

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

Thank you for weighing in Preran. I have also checked this issue across multiple browser types and the issue persists. Driving me crazy! I still can't find why this is happening. Let's hope someone out there has an answer.


Cheers,
Jonney

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

I'm on my iPad at the moment so am unable to check for you.

If the svg is not expanding to fit the page, it may be caused by one of two problems.

First check the viewport settings in your svg file are not set to a specific dimension by the use of pixels, instead of % values.

Second, it is also worth checking that the svg is not simply maintaining its correct proportions, (you are not trying to make the svg larger in width, but not in height. If the svg shrinks when you make the browser size smaller, but only expands to a certain width when the browser is made bigger, then this is probably your problem.

Images, (inc svg) unless specifically overridden, with css, will always try to maintain there intrinsic proportions.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

Thank you pziecina. This is very helpful.

On your first point, my export settings from Adobe Illustrator are attached here. When you say "Check the Viewport Settings" of the SVG, where and how would I do this? In Muse? From the AI export? I believe I have chosen Decimal values for the SVG out of AI. Also, interestingly, my export method for all SVGs has been the same, including the lower title bar that stretches from side to side as expected. So why would one work and the other not?

SVG Export Settings.png

I like your second point. This seems to be perhaps where the issue lies. Maybe it has something to do with how the layers are arranged... when the SVG tries to expand in height, layers above or below it are restricting it, and then it doesn't continue expanding.... I'll experiment.

An update... more strange behavior... The problem has rectified itself when I export a single page in Muse. Also works when I "Preview Site in Browser". But when Published to the web the problem comes back. So two totally different behaviors depending on export/view method.... Screen shots attached to show this.

Site published to host:

Screen Shot 2017-11-10 at 2.47.30 PM.png

Site "previewed in browser" from muse:

Screen Shot 2017-11-10 at 2.47.37 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

Your export settings look o/k, but just for future reference, to check the viewport settings in an svg, open the svg, (in say Dw) then just below the xml decleration you will see an element named 'viewport', (about 5 lines down). This element will have both the height and width settings, which in order for an svg to be responsive must be % values, (normally both 100%).

Looking at your screen shots, it may be caused by my second point, but also check that your browser cache is not the problem. Chrome in particular has a very sticky browser cache, that will require clearing a number of time before all old site resources are removed from the cache.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

LATEST

Hello again Pziecina. Thank you for the quick follow up. Awesome.

Thanks for the viewport review. Very helpful. I've checked it, and it all appears okay. Just incase you want to dig in further, I will create a link to the file to download: www.rhizomeconsulting.com/sandboxtroubleshooting/svgsamplefile.zip

I have checked across multiple browsers, and attempted full cleaning, multiple times of the cache and histories. I've tried rebooting and hard resets of browsers too. Still no solution to the problem.


Also, strangely, in reference to my last post that said the issue rectified itself in "Preview Site In Browser" exports, the problem has now reverted! What is so strange is the ground seems to be moving beneath me on this.

I think, given you second point, the next step is to start ripping the problem svgs out of the Muse site and see where the problem rectifies itself, and then start rebuilding from there, paying attention to the height and width restrictions you mentioned. I'll let you know how it goes.

Cheers,
Jonney

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines