Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Tab's title is "image/svg+xml"

Instead of displaying my title in text, I used inline HTML and SVG code to display a logo I made in Inkscape. It worked, but now the tab's title is "image/svg+xml". This is part of the title even when I set the title using HTML. How can I fix this? If it's of any relevance, I'm working in Sugarcube.

Comments

  • That shouldn't be possible. What version of SugarCube? Or are you confusing it with Sugarcane?
  • What do you mean it shouldn't be possible?
    html.png
    Note the effect the selected HTML has on the tab title. And I'm working in the latest Sugarcube.
  • edited September 2015
    I mean it should not be possible. Then again, I had no idea you were jamming an XML document wrapped in an HTML document naked into StoryTitle (hint: you should not be doing that).

    The StoryTitle special passage should:
    1. Contain the title of your project (i.e. CORAZÓN, in this case).
    2. Preferably not contain any markup, but certainly not contain an XML document wrapped in an HTML document.
    If you want a graphical title, there are various ways to accomplish that, the easiest is probably to jam it into the StoryBanner special passage and hide the #story-title element if necessary.
  • Works for me.

    While I'm here, I have a question about responsive design:
    I'm using this bit of CSS to ensure compatibility on mobile devices. I made a horizontal version of the logo to work with the UI bar being at the top of the screen rather than the left side. How do I get the Story Banner to change when it switches to "narrow viewport mode?"
  • If you care about responsive design, then you should probably be using SugarCube 2.x instead of 1.x. The responsive code in SugarCube 1.x was always a bit of a hack.

    Regardless. The SugarCube 1.x UI bar switch happens via CSS, so it would be best to use CSS for everything. Meaning you'll probably need to display your SVG as a CSS background. For example:
    /*
    	It's probably easiest to optimize both of your SVGs and then Base64-encode
    	them to use as data URIs.  You may need other `background` properties as well
    	and probably `width`/`height` properties.
    */
    #story-banner {
    	background-image: url("/* vertical SVG data URI here */");
    }
    @media screen and (max-width: 800px) {
    	#story-banner {
    		background-image: url("/* horizontal SVG data URI here */");
    	}
    }
    
    If you don't already know how, you can follow these step to optimize your SVGs and turn them into Base64-encoded data URIs:
    1. Optimize your SVGs: https://jakearchibald.github.io/svgomg/
    2. Turn the optimized SVGs into Base64-encoded data URIs: http://dataurl.net/#dataurlmaker
    As to why you should optimize your SVGs. The raw SVGs from Inkscape very likely contain lots of unnecessary things which you don't need in a final published SVG. They are also likely inefficient in regards to the necessary bits. Just don't overwrite your originals.
Sign In or Register to comment.