01-01-2013, 02:13 PM | #1 |
Bookmaker
Posts: 420
Karma: 2143650
Join Date: Sep 2010
Device: Cybook Opus
|
Margins on Floating SVG
Okay, so I'm attempting to use a floating SVG image as the link to what would be a sidebar in the paper copy of a book. I've set the SVG image up like this:
Code:
<div class="icon"> <svg height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" version="1.1" viewBox="0 0 200 200" width="200px"> <image class="icon" width="100%" height="100%" xlink:href="../Images/field.svg"></image> </svg> </div> Code:
.icon { float: right; display: block; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; } |
01-01-2013, 03:44 PM | #2 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Try setting the height and width of the icon div to 200px. Beyond that, my guess would be whitespace in the image itself.
I recommend taking a look at the HTML page in a good web browser with a decent web inspector that shows all the different boxes in the box model (e.g. a WebKit-based browser, or Firefox with Firebug). Alternatively, add "border: 1px solid red;" to see where the image's bounding box actually is. Oh, and another thing. I just noticed that you're floating the image to the right. If your paragraph style uses a ragged right margin, the right margin will appear larger because if an entire word doesn't fit, it gets kicked to the next line. Specifying a style that allows hyphenation can fix this. For example: Code:
p { hyphens: manual; -webkit-hyphens: manual; -moz-hyphens: manual; -epub-hyphens: manual; adobe-hyphenate: auto; } Last edited by dgatwood; 01-01-2013 at 03:48 PM. |
01-01-2013, 05:18 PM | #3 | |
Bookmaker
Posts: 420
Karma: 2143650
Join Date: Sep 2010
Device: Cybook Opus
|
Quote:
Code:
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="m0,0h512v512h-512z"/> <g transform="matrix(18.68858,0,0,18.68858,-4020.68104,-6000.48285)"> <path d="m531.0372,404.564c0,7.4688-6.0546,13.5234-13.5234,13.5234s-13.5234-6.0546-13.5234-13.5234 6.0546-13.5234 13.5234-13.5234 13.5234,6.0546 13.5234,13.5234z" fill="none" stroke="#fff" stroke-width="1.0479" transform="matrix(.91335,0,0,-.91335,-243.74502,704.31322)"/> <path d="m217.6201,339.8686c7.4964-1.0428 15.0449-1.3022 22.6973,0-3.233,9.0688-19.234,9.7148-22.6973,0z" fill="#fff" fill-rule="evenodd"/> <path d="m217.5938,330.0938c2.2793,1.146 7.5416-.5858 11.5,1.0312-.7265-.6797-1.5579-1.0706-2.4375-1.3125 2.2881.2469 5.4462-.6991 8.6875.625-.7164-.6702-1.5403-1.0381-2.4062-1.2812-1.6726-1.4122-3.8165-1.5223-5.875-1.4688-2.2524-1.6154-5.28-1.1499-7.7527-1.1317l-1.716,3.5379z" fill="#fff" fill-rule="evenodd"/> <path d="m235.375,331.4062c.4407.4296 1.0244.6438 1.7188.7812-2.5803.0571-5.0504.2924-6.6562-.625 .473.7605 1.0767,1.2412 1.7812,1.5312-1.0682-.0232-2.0587-.172-2.9375-.5938 1.4357,1.6291 3.6973,1.6384 6.125,1.4062 1.8494.6727 4.002.7748 6,.625l-.1562-1.1875-.3438.0312-.4375-1.9688c-1.2034.4251-3.9922.272-5.0938,0z" fill="#fff" fill-rule="evenodd"/> <path d="m228.5938,325.0938c.8374,1.5084 2.2497,1.5614 3.9612,1.4688 1.2547,1.5343 3.4246.9217 5.9138.9062l-.7532-1c-2.9347-1.8659-7.0466-.0469-9.1218-1.375z" fill="#fff" fill-rule="evenodd"/> <path d="m217.1563,338.3621c5.7852-1.5501 17.1559-1.7083 23.5313,0" fill="none" stroke="#fff"/> <path d="m219.5625,335.5809 1.2812,4.7188" fill="none" stroke="#fff"/> <path d="m223.1138,334.8621 .4911,4.5938" fill="none" stroke="#fff"/> <path d="m238.6362,335.9246-1.2812,4.7188" fill="none" stroke="#fff"/> <path d="m235.0536,335.2059-.4911,4.5938" fill="none" stroke="#fff"/> <path d="m231.0559,334.7996-.1831,4.5938" fill="none" stroke="#fff"/> <path d="m227.029,334.6434 .1831,4.5938" fill="none" stroke="#fff"/> </g> </svg> |
|
01-01-2013, 05:21 PM | #4 |
Bookmaker
Posts: 420
Karma: 2143650
Join Date: Sep 2010
Device: Cybook Opus
|
On the other hand, viewing the SVG in Firefox doesn't show any whitespace, which makes sense since there shouldn't be any. What else could I be doing wrong?
|
01-01-2013, 06:59 PM | #5 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
I see you have a viewport of 512 pixels but some of the values of the data are larger than that. Perhaps it is being scaled in the eBook with a simplistic scale factor which is leaving whitespace. Just a guess. But you might try drawing it so that it does not need scaling.
|
01-01-2013, 07:50 PM | #6 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
I'm not seeing any spacing around the image when I view just the snippets you have above in Safari with paragraphs of text after it. So whatever is happening, it's probably somewhere in your CSS other than in the bits posted above.
|
01-01-2013, 09:47 PM | #7 | ||
Bookmaker
Posts: 420
Karma: 2143650
Join Date: Sep 2010
Device: Cybook Opus
|
Quote:
Code:
@page { margin-top: 5pt; margin-bottom: 5pt; } body { display: block; } blockquote { margin-left: 0; margin-right: 0; text-indent: 0; } .bold { font-weight: bold; } .break1 { margin-top: 1em; } .break2 { margin-top: 2em; } .break-before { page-break-before: always; } .center { text-align: center; text-indent: 0; } .clean { text-indent: 0; } .footnote { page-break-before: always; padding-top: 10%; font-size: 0.85em; } .fullbox { page-break-before: always; padding-top: 2.0em; display: block; padding-bottom: .25em; } .fullpage { page-break-before: always; page-break-after: always; padding-top: 25%; } .fullpageA { page-break-after: always; padding-top: 25%; } .gallery { height: 20%; page-break-after: always; } .galleryi { max-width: 100%; max-height: 80%; } .galleryii { max-width: 100%; max-height: 100%; } h1, h2, h3, h4, h5 { text-align: center; text-indent: 0; margin-bottom: 1.0em; margin-top: 1.0em; } h1.title { text-align: center; margin-top: 2.0em; margin-bottom: 1.0em; font-size: 2.5em; } h2.author { text-align: center; margin-top: 1.0em; } h4.year { text-align: center; margin-top: 2.0em; } .icon { float: right; display: block; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; } li.defining { list-style-image:url("../Images/defining-bullet.png"); } li.dramatic { list-style-image:url("../Images/dramatic-bullet.png"); } li.heroic { list-style-image:url("../Images/heroic-bullet.png"); } li.lurid { list-style-image:url("../Images/lurid-bullet.png"); } li.passionate { list-style-image:url("../Images/passionate-bullet.png"); } li.pastoral { list-style-image:url("../Images/pastoral-bullet.png"); } li.ritual { list-style-image:url("../Images/ritual-bullet.png"); } li.setting { list-style-image:url("../Images/setting-bullet.png"); } .iconic-title { page-break-before: always; padding-top: 20%; } .iconic-image { margin-left: auto; margin-right: auto; margin-top: 1.0em; max-width: 30%; } .iconic-image-left { margin-top: 1.0em; max-width: 50%; float: left; } .iconic-image-right { margin-top: 1.0em; max-width: 50%; float: right; } .iconic-marker { font-style: italic; text-align: center; text-indent: 0; font-size: 85%; margin-top: 1.0em; page-break-after: always; } .italic { font-style: italic; } p { text-indent: 2.0em; margin-top: 0; margin-bottom: 0; text-align: justify; } p.missive { margin-left: 1em; margin-right: 1em; text-indent: 0em; } p.missive-indent { margin-left: 1em; margin-right: 1em; text-indent: 2em; } .right { text-align: right; } .sidebar { border: 5px groove; display: block; float: right; margin-bottom: 1%; margin-left: 1%; margin-right: 1%; margin-top: 1%; width: 40%; padding-bottom: .25em; padding-left: 4px; padding-right: 4px; font-size: 0.8em; } .sidebarL { border: 5px groove; display: block; float: left; margin-bottom: 1%; margin-left: 1%; margin-right: 1%; margin-top: 1%; width: 40%; padding-bottom: .25em; font-size: 0.8em; } .sidebarLink { /* Comment out the next line for linked sidebars; uncomment it for full ones. */ /* display: none; */ text-align: center; text-indent: 0; } .sidebarEll { /* Comment out the next line for linked sidebars; uncomment it for full ones. */ /* display: none; */ } .sidebarTextB { /* Uncomment the next line for linked sidebars; comment it out for full ones. */ display: none; } .sidebarpage { page-break-before: always; margin-top: 2.0em; } .small-caps { font-size: 85%; } .snapshot { page-break-before: always; margin-top: 1.0em; margin-bottom: 1.0em; border-bottom: 2px solid black; text-align: left; font-style: italic; } span.subtitle { font-size: 80%; font-style: italic; font-weight: normal; } ul { margin-top: 1.0em; margin-bottom: 1.0em; } ul.inner { margin-top: 0; margin-bottom: 0; } Quote:
|
||
01-02-2013, 01:20 AM | #8 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
|
01-03-2013, 01:48 AM | #9 |
Bookmaker
Posts: 420
Karma: 2143650
Join Date: Sep 2010
Device: Cybook Opus
|
|
01-03-2013, 08:14 AM | #10 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Not if the viewer was written correctly. The viewBox in SVG is equivalent to PostScript's BoundingBox. The content inside the viewBox is scaled to fit the height and width of the enclosing element. Anything outside that box probably doesn't get drawn, but if it is drawn, it is drawn outside the bounds of the CSS box defined by the enclosing element.
Last edited by dgatwood; 01-03-2013 at 08:53 AM. |
01-03-2013, 11:16 AM | #11 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
|
01-03-2013, 07:51 PM | #12 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
http://sawyerhollenshead.com/writing...-svg-clippath/ |
|
01-04-2013, 02:09 AM | #13 |
Bookmaker
Posts: 420
Karma: 2143650
Join Date: Sep 2010
Device: Cybook Opus
|
Hm. Is there a simpler way to get a scaling image to float off to one side with its size set as a specific percentage of the page width?
I mean, I guess if I have to I can just convert it into a PNG of about the right size, but being able to do it this way was supposed to be what SVG is for. |
Tags |
svg |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
floating by! | euterpe | Introduce Yourself | 4 | 04-01-2012 05:37 PM |
'Floating' illustrations | lindsayw | Workshop | 10 | 08-31-2011 10:33 PM |
Just an idea: floating DRM | tho | General Discussions | 18 | 07-19-2011 03:07 AM |