Sizing of an object tag inside of a button tag

Question

I have 3 social buttons located on the bottom of this sound player. I cannot seem to make the SVG (inside of the <object>) to resize the object and button to fit the SVG. I really don't want to hack it either and offset with padding, margin, etc.

Thanks for the help in advance!

/* Fonts */
@import url("../fonts/nivo/stylesheet.css");


body {
    background: #F5F4EF url('../images/smbg.png');
}

/* Media container */
#outer_container {
    background: #fff;
    padding: 12px 14px 12px 14px;
    border-radius: 5px;
}

#inner_container {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.5);
    display: table;
    position: relative;
    width: 100%;
}

.start {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    width: 8%;
    border-right: 1px solid rgba(162, 162, 162, .5);
}

.player {
    width: 100%;
    margin-left: 2px;
}

button {
    color: #000;
    background-color: #fff;
    border-color: #eee;
    display: inline-block;
    margin-bottom: 5px;
    width: 70px;
    height: 30px;
    cursor: default;
    border: none;
    text-decoration: none;
    appearance: none;
    outline: none;
}

#media-title {
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif; 
    letter-spacing: 1px;
    color: #414042;
    width: 100%;
    display: block;
    vertical-align: middle;
    padding-bottom: 5px;
    padding-top: 5px;
    position: relative;
}


.empty_space {
    float: left;
    display: inline-block;
    height: 100%;
    width: 2px;
    vertical-align: middle;
    text-align: center;
}

a.sound_name {
    color: #888888;
    text-decoration: none;
    font-weight: 200;
    &:hover {
    color: #000000;
    text-decoration: none;
    }
}

#media-type {
    right: 0;
    position: absolute;
}

object {
    
}

.object_social {
    display: inline;
    position: relative;
    left: 0;
    
}

                <div id="inner_container">
                    
                    <!-- Play button -->
                    <div class="start">
                        <object class="play_button" id="play" type="image/svg+xml" data="images/play_button.svg">
                            Play
                        </object>
                    </div>
                    
                    <!-- Waveform and Assorted Content -->
                    <div class="player">
                        
                        <!-- empty padding space -->
                        <div class="empty_space">&nbsp</div>
                        
                        <div id="media-title">
                            <a class="sound_name" href="#">Collection Name</a> - <strong>Kick Loop 1</strong>
                        
                        
                        <div id="media-type">
                            <object class="sound_type" type="image/svg+xml" data="images/SoundType/loop.svg">
                            </object>
                        </div>
</div>
                        <div id="waveform">
                            
                            <!-- empty padding space -->
                            <div class="empty_space">&nbsp</div>
                            
                            <div class="progress progress-striped active" id="progress-bar">
                                <div class="progress-bar progress-bar-info"></div>
                            </div>
                        
                            <!-- Here be the waveform -->
                        </div>
                        
                        <div class="button_social">
                            
                            <!-- empty padding space -->
                            <div class="empty_space">&nbsp</div>
                            
                            <button>
                                <object class="object_social" type="image/svg+xml" data="images/like_button.svg">
                                </object>
                            </button>

                            <button>
                                <object class="object_social" type="image/svg+xml" data="images/bucket_button.svg">
                                </object>
                            </button>

                            <button>
                                <object class="object_social" type="image/svg+xml" data="images/share_button.svg">
                                </object>
                            </button>
                            
                        </div>
                    </div>
                    <!-- End Waveform and Assorted Content -->
                    
                </div>

score 1 · Answer 1 · edited May 23 '17 at 10:27

Using SVG with CSS

"you can't use an external stylesheet or on the document, you need to use a element inside the SVG file itself."

<svg ...>
    <style>
    /* SVG specific fancy CSS styling here */
    </style>
    ...
</svg>

"SVG has a way to declare an external stylesheet, which can be nice for authoring and caching and whatnot. This only works with embedding of SVG files as far as I've tested. You'll need to put this in the SVG file above the opening tag."

<?xml-stylesheet type="text/css" href="svg.css" ?>

This is the first link when using google to search for svg css

EDIT:

How to apply a style to an embedded SVG?

"Short answer: no, since styles don't apply across document boundaries.

However, since you have an tag you can insert the stylesheet into the svg document using script."

See link for instructions.

This is the first link when using google to search for html css object svg

I do have an external stylesheet linked to my Svgs like you say above. The problem that I am having is aligning it inside of the Object Tag, and the Object Tag inside of the Button Tag...I have it centered inbetween the two, but object tag that holds the svg has width that is larger than the svg's width. How can I make either the object tag's width smaller, or even better, how can I have the object tag automatically adjust to the width and height of the svg? — Austin Perez, Apr 30 '15 at 23:09

score 0 · Answer 2 · answered May 01 '15 at 02:43

Make sure your SVGs have a width and height. As long as your SVG has an explicit size, the <object> should resize to fit it, and the <button> should resize to fit the <object>.

For instance, the following works just fine for me:

SVG (icon.svg)

<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="lime"/>
</svg>

HTML

<html>
 <body>

  <button>
    <object type="image/svg+xml" data="icon.svg"></object>
  </button>

 </body>
</html>

Sizing of an object tag inside of a button tag

2 Answers2