![]() |
#1 |
Member
![]() Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
|
can I use SVG images in mobi?
Sorry, this seems like such a simple question, but I can't seem to find a simple answer. I realize the new KF8 format supports SVG, but can I use SVG images in the regular mobi 7 format?
|
![]() |
![]() |
![]() |
#2 |
eBook Enthusiast
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 85,544
Karma: 93383099
Join Date: Nov 2006
Location: UK
Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6
|
No, you can't. JPEG or GIF only.
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
That said, if KF8 supports SVG, you should be able to take advantage of the <object> tag's fallback behavior to supply SVG content for the KF8 side of things and non-SVG content for traditional MOBI. For example:
Code:
<object data="path/to/foo.svg"> <img src="path/to/foo.jpg"> or other arbitrary HTML here </object> |
![]() |
![]() |
![]() |
#4 |
Enthusiast
![]() Posts: 48
Karma: 10
Join Date: Aug 2011
Device: Ipad
|
From my tests with SVG in Kindle Previewer - old Kindle emulation, I saw that it did not show the SVG graphics but it did show text within the text tags, I could even control the alignment of it by wrapping the SVG in div tags and applying CSS:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0" y="0%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet" > <g id="hidden_full_text"> <text transform="matrix(1 0 0 1 430.5 531.7754)" fill="#BF0A1E" font-family="'MyriadPro-Regular'" font-size="1">EDITOR'S LETTER</text> </g> </svg> |
![]() |
![]() |
![]() |
#5 |
Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
You can also wrap the SVG version and a non-SVG version in separate divs with separate classes and use CSS to determine which one gets shown, e.g.
Code:
@media amzn-mobi { .kf8only { display: none; } .mobionly { display: inline; } } @media not amzn-mobi { .kf8only { display: inline; } .mobionly { display: none; } } |
![]() |
![]() |
Advert | |
|
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
blank pages after SVG images in Kobo | jobalcaen | ePub | 3 | 05-19-2013 01:19 PM |
svg image inside span tag in mobi file not display numbers | Hala Aly | Workshop | 3 | 09-12-2012 08:00 AM |
HTML + Images = MOBI without Images | SunLight | Amazon Kindle | 5 | 08-25-2012 02:27 PM |
How to center/fit page width SVG images with <OBJECT> | amoroso | ePub | 0 | 07-31-2010 11:48 AM |
0.6.x Images in Mobi | jmcphail | Calibre | 5 | 08-07-2009 12:00 PM |