The first and probably best method you could use is just using the [`viewBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute (this attribute is case sensitive). That will make the contents of the svg tag automatically take up the defined width and height of the svg tag itself, by only showing what&#39;s within the defined boundaries. For example:

    &lt;svg width=&quot;82&quot; height=&quot;82&quot; viewBox=&quot;0 0 102 102&quot;&gt;
        &lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;100&quot; height=&quot;100&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;white&quot;/&gt;
        &lt;text fill=&quot;black&quot; x=&quot;10&quot; y=&quot;30&quot;&gt;FooBarBaz&lt;/text&gt;
    &lt;/svg&gt;

Alternatively, you could apply a svg `transform` to the contents of the SVG tag, which would look like this:

    &lt;svg width=&quot;82&quot; height=&quot;82&quot;&gt;
        &lt;g transform=&quot;scale(0.8)&quot;&gt;
            &lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;100&quot; height=&quot;100&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;white&quot;/&gt;
            &lt;text fill=&quot;black&quot; x=&quot;10&quot; y=&quot;30&quot;&gt;FooBarBaz&lt;/text&gt;
        &lt;/g&gt;
    &lt;/svg&gt;

Finally, you can try using CSS3 `transform` to scale the whole svg element. This is the least supported method, but I mention it anyway because you originally asked for a CSS solution. I strongly suggest using one of the above solutions though, if that&#39;s possible at all.

    &lt;svg width=&quot;102&quot; height=&quot;102&quot; style=&quot;transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);&quot;&gt;
    	&lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;100&quot; height=&quot;100&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;white&quot;/&gt;
    	&lt;text fill=&quot;black&quot; x=&quot;10&quot; y=&quot;30&quot;&gt;FooBarBaz&lt;/text&gt;
    &lt;/svg&gt;

A Quote from Google in terms of Designing, and some example of apps:
------------------------------------------------------------------------

Based on what **Google** said in http://developer.android.com/ within design section, a developer should consider three goals:

 - Enchant me
 - Simplify my life
 - Make me amazing

**Which BTW we (Developers) are aware of.** 

By looking at many successful apps on play store, you can see that they are designed by  following Google design guidelines and are pretty much using the *same* **components** and **theming** and **styles** that google used in their own apps.

Many people do enjoy these kind of designs and also these android standards in terms of themes and components, but when you look at some apps in **Playstore** or some hardware manufacturer&#39;s apps like **samsung** whom have built their special apps (like galaxy note 10.1 **note taking app**) or **asus weather app** or in **playstore** the [Timely][1] app which is awesome in terms of functionality and of-course design, you could see they are using different kind of design and components.

-----

Now let&#39;s get deeper in what Google [says][2]:
----------------------------------------------

&gt; A typical Android app uses action bars, and many apps will include a navigation drawer.

Like these:

The Actionbar: ![enter image description here][3]

The Navigation Drawer: 

![enter image description here][4]

And other standard components on android.

But How can some developers make apps so beautiful and functionally perfect (almost! ) like Timely app and not using many of the android typical components defined by google.

---

Lets take a look at **Timely** app:
-----------------------------------

This is the screen where user can see the alarms where he/she could set one or just watch the clock:

![enter image description here][5]
![enter image description here][6]

Now the questions that come in my mind are:

 - How can I theme my app like that?
 - How can I make background animations like that and use it in my apps?
 - Did their developers use unity and eclipse together to make it function as an android app?
 - If they did use unity then how come the app runs very smooth?
 - In its actionbar ,how did they colorized it and defined opacity for the object?
 - What kind of animation class can do what they did in the app? (like the clock time changing animation)
 - If they used unity then how come their app&#39;s size is 10MB?

There are many other apps like this (no 100% that much alike) which have their own special design.

As far as I understand, there aren&#39;t much website that offer custom components for android like http://androidviews.net/ so it seems we are forced to make our own components which is time consuming and in this time (2013) isn&#39;t perfect whereas for ios there are tons of custom components made by other companies.

I also looked at the Timely app website, and within their [FAQ][7] section there is a place where they said they will reveal what and how they did the theming, coloring and components but since there is not time schedule table for their announcement and I don&#39;t like to stay in dark area, I came here to ask you experts.

This is the **quote** from [their website][8]:

&gt; I&#39;m a developer and just can&#39;t figure out how you did those animations
&gt; and color effects.
&gt; 
&gt; We are planning to have an engineering blog in the future. Stay tuned!

If you guys know how to make apps like these or if you know a portion of what kind of animations, components, tricks and hacks they used then you just made my day.


  [1]: https://play.google.com/store/apps/details?id=ch.bitspin.timely
  [2]: http://developer.android.com/design/get-started/ui-overview.html
  [3]: http://i.stack.imgur.com/daYnL.png
  [4]: http://i.stack.imgur.com/bWf6F.png
  [5]: http://i.stack.imgur.com/oPqbO.png
  [6]: http://i.stack.imgur.com/efdSL.png
  [7]: http://www.bitspin.ch/support
  [8]: http://www.bitspin.ch/support#answer_15

How to make Beautiful &amp; Stylish apps like Timely

If I get it right, `GOOS` is determined when compile the source code.

To better support multiple OS, I&#39;m interested in what `GOOS` could be.

Of course, there might be infinite possibilities of it, since Go is opensourced. So what I really want is a &quot;common list&quot;.

Known values are:

* `windows`
* `linux`
* `darwin` or `freebsd` or `unix`? I know that at least one of them must exist.

All possible GOOS value?

I want to use CSS styles to control the size of SVG designs. For example...

    .svg { width:100%; }

When I embed an SVG image from a file it acts just like any other image and works fine:

    &lt;img src=&quot;image.svg&quot; class=&quot;svg&quot; /&gt;

But when I use inline SVG it DOESN&#39;t work:

    &lt;svg class=&quot;svg&quot;&gt;...&lt;/svg&gt;

The svg &quot;box&quot; will grow, but the contents stay the same.

Is there a way to do this?

Is is possible to scale inline SVG with CSS?

I want to use CSS styles to control the size of SVG designs. For example...
<pre><code class="hljs language-css">.svg { width:100%; }
</code></pre>
When I embed an SVG image from a file it acts just like any other image and works fine:
<pre><code class="hljs language-ini">&#x3C;img src="image.svg" class="svg" />
</code></pre>
But when I use inline SVG it DOESN't work:
<pre><code class="hljs language-ini">&#x3C;svg class="svg">...&#x3C;/svg>
</code></pre>
The svg "box" will grow, but the contents stay the same.
Is there a way to do this?

I want to use a Font Awesome icon as CSS content, i.e.,

    a:before {
        content: &quot;&lt;i class=&#39;fa...&#39;&gt;...&lt;/i&gt;&quot;;
    }

I know I cannot use HTML code in `content`, so is it only images left?


Use Font Awesome icon as CSS content

Is there a **difference between** these two CSS properties:

    background: none;
    background: transparent;

 1. Are they both valid?
 2. Which one should be used and why?

background:none vs background:transparent what is the difference?

I&#39;m trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I&#39;m adding the image to the back-ground of the input and I&#39;m editing the place and the size that the font will appear.
The only thing that I can&#39;t find a way to edit is the small &#39;x&#39; button that appears when I&#39;m using input type search.
I want to move it a little bit left so it will fix my search bar image.

Here is my HTML:

    &lt;input id=&quot;search&quot; name=&quot;Search&quot; type=&quot;search&quot; value=&quot;Search&quot; /&gt;

Here is my CSS:

    #search{
        width: 480px;
        height: 49px;
        border: 3px solid black;
        padding: 1px 0 0 48px;
        font-size: 22px;
        color: blue;
        background-image: url(&#39;images/search.jpg&#39;);
        background-repeat: no-repeat;
        background-position: center;
        outline: 0;
    }

Editing input type=&quot;search&quot; Pseudo-element Button (&#39;x&#39;)

I have a graph plugin that inserts canvas and a legend `&lt;table&gt;` to its container. In this plugin the `table` has no `width` defined and in my CSS there is a width for tables inside that container were my plugin gets inserted.

So, the new div is inheriting `table{ width: 100%}` from the CSS and rendering wrong.

I tried to use `width: initial;`, looks good on Chrome but [**IE doesn&#39;t like it**][1] &lt;sup&gt;check browser compatibility&lt;/sup&gt;

I admit changing/forcing a inline CSS in the script/plugin since it has to work in any enviroment.

What is the best solution here?


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/initial?redirectlocale=en-US&amp;redirectslug=CSS/initial

use initial width for element not working in IE

With Bootstrap class `table-striped`, every other row in my table has a background colour equal to `#F9F9F9`. How can I change this colour?

Bootstrap table striped: How do I change the stripe background colour?

I am searching for a graph which has **3 dimensions (x, y, and z)** and uses **D3.js**. Please let me know if there are any data visualization site where I can find such graph or if there is one on [d3js.org][1] that I have missed  out somehow.


  [1]: http://d3js.org

3 dimension (X, Y and Z) graph using D3.js

What exactly does the `enable-background` attribute do? 

I read the [specification][spec] but still I don&#39;t understand it.

[spec]: http://www.w3.org/TR/SVG11/filters.html#AccessingBackgroundImage

What exactly does the enable-background attribute do?

I have a SVG graphic put like this:

    a::before { content: url(filename.svg); }

When I hover over the &lt;a&gt; tag, I really want the SVG to change the fill color, without loading a new SVG file, as I have now:

    a:hover::before { content: url(filename_white.svg); }

Is this possible to achieve using JavaScript, jQuery or just pure CSS that I am not aware of?

Thanks.

Change SVG fill color in :before or :after CSS

I have tried to find a proper SVG library for modern browsers. My goal is to decide, what library is suitable for creating simple online SVG editor with eg. text and path editing and clipping text with paths.

I found two libraries, which may be suitable: **Snap.svg** and **Svg.js**.

----
&lt;b&gt;SNAP.SVG&lt;/b&gt;

Github: https://github.com/adobe-webplatform/Snap.svg  
Source code lines: 6925
Github Stars: 3445  
Doc: http://snapsvg.io/docs/  
Getting started: http://snapsvg.io/start/  
Starter example ([JSBIN][1])

    var draw = Snap(800, 600);

    // create image
    var image = draw.image(&#39;/images/shade.jpg&#39;, 
                           0, -150, 600, 600);

    // create text
    var text = draw.text(0,120, &#39;SNAP.SVG&#39;);
  
    text.attr({
      fontFamily: &#39;Source Sans Pro&#39;,
      fontSize: 120,
      textAnchor: &#39;left&#39;
    });

    // clip image with text
    image.attr(&#39;clip-path&#39;, text);

----
&lt;b&gt;SVG.JS&lt;/b&gt;

Github: https://github.com/svgdotjs/svg.js  
Source code lines: 3604
Github Stars: 1905  
Doc: https://svgdotjs.github.io/

Starter example ([JSBIN][2]):


    var draw = SVG(&#39;drawing&#39;);

    // create image
    var image = draw.image(&#39;/images/shade.jpg&#39;);
    image.size(600, 600).y(-150);

    // create text
    var text = draw.text(&#39;SVG.JS&#39;).move(300, 0);
    text.font({
      family: &#39;Source Sans Pro&#39;,
      size: 180,
      anchor: &#39;middle&#39;,
      leading: &#39;1em&#39;
    });

    // clip image with text
    image.clipWith(text);

---

Usage seems to be rather similar.

What are the main differences between these two libraries?

  [1]: http://jsbin.com/yunen/1/edit
  [2]: http://jsbin.com/yahel/1/edit

Snap.svg vs Svg.js

I have a div set with a background image:

    &lt;div&gt;Play Video&lt;/div&gt;

with the following CSS:

    div {
	background-image: url(&#39;icon.png&#39;);
	background-image: url(&#39;icon.svg&#39;), none;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 90% 50%;
	padding: 20px;
	width: 150px;
    }


The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.

Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?

Content Type	Original Author	Original Content on Stackoverflow
Question	emersonthis	View Question on Stackoverflow
Solution 1 - Css	Joeytje50	View Answer on Stackoverflow

Is is possible to scale inline SVG with CSS?

Css Problem Overview

Css Solutions

Solution 1 - Css

All possible GOOS value?

How to make Beautiful & Stylish apps like Timely

Attributions