Text Scaling Wrong

Post about projects that use Inkscape for web design.
cperg
Posts: 3
Joined: Sat Jan 17, 2015 9:49 pm

Text Scaling Wrong

Postby cperg » Sun Jan 18, 2015 6:03 am

I have one image that is a composite of an original JPEG (converted in inkscape to paths and colors) and another that was built in inkscape (the profileES logo). I also added some text onto the image within inkscape. Output as an inkscape SVG and placed in the header of a website. The website is responsive from a large desktop down to a small mobile so there is a great need to manipulate the width of the combined SVG (all done in CSS with media quires).

This is the trouble I am seeing - when the size is diminished there is one line in the logo portion that gets smaller but not at the same rate as the rest of the logo, and as I am seeing it, not at the same rate as the whole SVG. The logo has other text in it but that seems to be scaling correctly. The text added (Improving the Way Business Works) also seems to not scale down as readily, even though it is much less noticeable.

I am attaching the composite image in SVG format (compressed as zip) just as I am using it. The site in which it is being used is a development version so it usually is set to maintenance mode. I will remove maintenance on that site until Tuesday 5 PM - Jan 20 2015 GMT. To see why I am opening this discussion, just torture the site (start with a nearly full sized browser and then slim it down to about mobile size).You will see the phrase "complete business systems" run off the right side of the logo white background.

You may also notice that the image is not properly positioned at every width. I will continue to work on this facet of the website. The positioning of th image has nothing to do with the SVG resizing issue I am discussing here. Please look past it.

I would really like to get this issue corrected - even if it means going at the code within the SVG.
Attachments
header_image.zip
please note this is the zip compressed SVG mentioned above...
(210.28 KiB) Downloaded 342 times

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Text Scaling Wrong

Postby tylerdurden » Sun Jan 18, 2015 7:59 am

You might try converting the text objects to paths. scaling may improve and you will not risk a viewer not having the font on their machine.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

cperg
Posts: 3
Joined: Sat Jan 17, 2015 9:49 pm

Re: Text Scaling Wrong

Postby cperg » Sun Jan 18, 2015 9:48 am

Sounds good - I will be adding Google fonts to the site in the tomorrow - the missing font issue should not be a problem at that time. The changing of the lettering to graphics is a bit of a dissappointment in that having SEO readable content in the images is one of the minor betterments of SVG over stadard bit mapped graphics...

The fact that the other logo text (i.e. profile ES) does not have the reduction issue and it is the same font leaves me to believe that it is more of a inkscape composition issue..

I am thinking it is about kerning - The line that is getting so long has a great deal of kerning to make it line up with the profile ES part.

tylerdurden - I will most definitely keep this option in mind if there is not other solution. Thanks for the potential solution.

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Text Scaling Wrong

Postby tylerdurden » Sun Jan 18, 2015 10:09 am

Maybe you can make a duplicate of the text and move it outside the visible page, while converting the visible text to paths.

Alternative to moving the actual text off-page, maybe drop it to the bottom layer, no stroke or fill, etc... I have no idea if search engines will know any difference. I used to hide text all over web pages until they got wise and declared the practice "word spamming". ;-]
(That was a very long time ago.)
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Text Scaling Wrong

Postby tylerdurden » Sun Jan 18, 2015 10:27 am

This might also be "legit"... adding the text content to the object description. I don't know if the bots scrape that deep, tho.
Slogan1.jpg
Description, and duplicate kept as text outside the page.
Slogan1.jpg (91.88 KiB) Viewed 7512 times
Attachments
Slogan1.svg
(14.3 KiB) Downloaded 343 times
Last edited by tylerdurden on Sun Jan 18, 2015 12:22 pm, edited 1 time in total.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

cperg
Posts: 3
Joined: Sat Jan 17, 2015 9:49 pm

Re: Text Scaling Wrong

Postby cperg » Sun Jan 18, 2015 12:08 pm

Thanks again - will have a look at that.

paullarry
Posts: 11
Joined: Mon Dec 15, 2014 5:27 pm
Location: USA
Contact:

Re: Text Scaling Wrong

Postby paullarry » Mon Jan 19, 2015 10:04 pm

Nice idea for me too creating a duplicate of the text and move it outside the visible page, while converting the visible text to paths.

DamVan
Posts: 1
Joined: Wed Aug 05, 2015 12:22 pm

Re: Text Scaling Wrong

Postby DamVan » Wed Aug 05, 2015 12:24 pm

Thank for the answer! same question!


Return to “Inkscape & the Web”