當前位置：首頁 >

css svg使用_使用CSS使SVG响应

發布時間：2024/1/1 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 css svg使用_使用CSS使SVG响应小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css svg使用

An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg> tag. The other commonly used techniques include embedding it as an image using the <img> tag, embedding it using the <object> tag, using an iframe, and as a CSS background image.

SVG可以通過多種方式嵌入到網頁中。其中之一是使用<svg>標記將其內嵌在HTML5頁面中。其他常用的技術包括使用<img>標簽將其嵌入為圖像，使用<object>標簽，使用iframe嵌入為圖像以及CSS背景圖像。

Conceptually, making an SVG scale as its container scales should be as simple as removing any fixed height and/or width, and specifying a viewBox attribute value. However, due to different browser implementations and inconsistencies, the web isn’t all ponies and rainbows, and making SVGs fluid isn’t quite that straightforward, because the way browsers determine the dimensions of an SVG when embedded in different ways isn’t consistent across all of them.

從概念上講，制作SVG縮放比例及其容器縮放比例應與刪除任何固定的高度和/或寬度并指定viewBox屬性值一樣簡單。但是，由于不同的瀏覽器實現方式和不一致之處，網絡并不僅是所有的小馬和彩虹，而且使SVG流暢起來并不是那么簡單，因為以不同方式嵌入時，瀏覽器確定SVG尺寸的方式不一致遍及所有人。

That said, there are certain “fixes” and hacks that we can use to get the expected behavior in all browsers. In this article, we’re going to explore these techniques, going over when to use each one, in order to make SVGs fluid and/or adaptive.

就是說，我們可以使用某些“修復”和黑客手段來在所有瀏覽器中獲得預期的行為。 在本文中，我們將探討這些技術，并探討何時使用每種技術，以使SVG變得流暢和/或自適應。

使用CSS使SVG流暢 (Making SVGs Fluid Using CSS)

In order to make an SVG fluid, the first logical thing to do is to remove the height and width attributes. When a fixed height and/or width is specified, the SVG is going to maintain that height/or width, thus restricting it from being fully responsive. You should, however, leave the viewBox attribute present. After removing the height and width, you can embed the SVG in one of several ways on the page.

為了使SVG流暢，要做的第一件事就是刪除height和width屬性。當指定了固定的高度和/或寬度時，SVG將保持該高度/或寬度，從而限制了它的完全響應性。但是，您應該保留viewBox屬性存在。刪除高度和寬度后，您可以通過以下幾種方式之一將SVG嵌入頁面。

We’ll be using the following SVG nautical logo in the demos. It’s from a freebie designed by Freepik.

在演示中，我們將使用以下SVG航海徽標。它來自Freepik設計的免費贈品。

使用<img>嵌入的SVG (SVG embedded using <img>)

When an SVG is embedded as an image in an <img> tag, the height and width specified on the <img> tag are used by the browser as a viewport to render the SVG into. The contents of the SVG are then positioned inside the viewport depending on the value of the viewBox specified on the <svg>.

當SVG被嵌入作為在圖像<img>標記，高度和寬度上的指定<img>標記被用于由瀏覽器作為視口以使SVG成。然后，根據<svg>上指定的viewBox的值，將SVG的內容放置在視口中。

Normally, browsers are smart enough to determine the width and height of the SVG even if you don’t specify a width and height for the <img> element. For example, if you were to wrap the img in a div, without specifying the height and width of the img, Chrome and Firefox will both assume the img has width: 100%; the SVG is then stretched to fill the containing div, and its height is adjusted accordingly so that it preserves its aspect ratio. As the containing div is then resized, the img SVG responds in an expected way. This behavior is different from an img referencing a raster graphic such as a PNG image, for example; in the latter case, you’d have to explicitly set the width of the img to 100% using CSS to make it fluid.

通常，即使您沒有為<img>元素指定寬度和高度，瀏覽器也足夠聰明地確定SVG的寬度和高度。例如，如果你要包裹img在div ，而不指定的高度和寬度img ，Chrome和Firefox都將假定img具有width: 100% ; 然后將SVG拉伸以填充包含的div ，并對其高度進行相應的調整，以保留其寬高比。然后，在調整包含div的大小時， img SVG將以預期的方式響應。例如，此行為與引用柵格圖形(例如PNG圖像)的img不同；在后一種情況下，您必須使用CSS將img的寬度顯式設置為100％，以使其流暢。

In Internet Explorer, things are different. If you don’t specify a width for the img, it will assume the height is equal to 150px, which is the default height for replaced elements as specified in CSS—the default width is 300px. The SVG is then positioned inside the containing div such that its height is equal to 150px; the width is assumed to be 100%, though, making the SVG always 150px in height no matter how wide the container gets, resulting in extra white spaces on both sides. In order to work around this issue in IE, it is enough to explicitly set the width on the img to 100%. These results were obtained from tests made in Internet Explorer 9 and 11.

在Internet Explorer中，情況有所不同。如果您未為img指定寬度，它將假定高度等于150px，這是CSS中指定的替換元素的默認高度-默認寬度為300px。然后，將SVG放置在包含div內部，使其高度等于150px；但是，假定寬度為100％，無論容器有多寬，SVG的高度始終為150px，從而在兩側都留有額外的空白。為了解決IE中的此問題，只需將img的寬度顯式設置為100％就足夠了。這些結果是從Internet Explorer 9和11中進行的測試獲得的。

So, making an SVG embedded as an img fluid is doable by removing the explicit height and width set on the <svg>, and then adding one line of CSS for Internet Explorer:

因此，通過刪除<svg>上的顯式高度和寬度，然后為Internet Explorer添加一行CSS，可以使SVG嵌入為img流體。

/* fix for IE */ img {width: 100%; }

Check the demo out in different browsers to see how the SVG behaves.

在不同的瀏覽器中查看演示，以了解SVG的行為。

Note that if you choose to set a width and height on the <img> tag other than 100%, the SVG viewBox is going to fit inside the viewport created by these dimensions just like it would if the width and height were set on the <svg> element. This is due to the fact that the dimensions of the img establish the viewport for the SVG it references.

請注意，如果您選擇在<img>標記上設置100％以外的寬度和高度，則SVG viewBox將適合這些尺寸創建的視口，就像在<svg>元素。這是因為img的尺寸為它引用的SVG建立了視口。

使用<object>嵌入的SVG (SVG embedded using <object>)

An SVG embedded using an <object> tag behaves in a similar way to that embedded using <img> when it comes to making the SVG fluid.

使用<object>標記嵌入的SVG的行為與使用<img>嵌入的SVG的行為類似。

Just like with the img tag, Firefox and Chrome both assume the width of the SVG object to be 100%, and the height changes proportionally as the width increases or decreases, and hence the SVG scales as expected. The width and height set on the object will be the viewport inside which the SVG graphic is rendered.

就像img標簽一樣，Firefox和Chrome都假定SVG對象的寬度為100％，并且高度隨著寬度的增加或減小成比例地變化，因此SVG可以按預期縮放。在object上設置的寬度和高度將是在其中渲染SVG圖形的視口。

In Internet Explorer, the same issue as the one we mentioned earlier occurs, where the SVG’s height is set to the default 150px. The issue is also fixed by setting the width of the object explicitly to 100%:

在Internet Explorer中，發生了與我們前面提到的問題相同的問題，其中SVG的高度設置為默認的150px。通過將object的寬度顯式設置為100％也可以解決此問題：

/* fix for IE */ object {width: 100%; }

Here is a demo that you can check out.

這是您可以簽出的演示。

使用<iframe>嵌入的SVG (SVG embedded using <iframe>)

An <iframe> is very similar in function and features to an <object> in SVG.

However, the way browsers seem to handle it is different. Chrome, Firefox, and Internet Explorer currently handle an iframe referencing an SVG (that doesn’t have a width and height) by defaulting to the default size for replaced elements that we mentioned before: 300px width and 150px height. In the previous cases, when IE used the default height of 150px, it assumed the width to be 100%. However, with the iframe, all three browsers set both the height and the width of the iframe to a fixed 300px by 150px size.

但是，瀏覽器似乎處理它的方式有所不同。 Chrome，Firefox和Internet Explorer當前通過默認為我們之前提到的替換元素的默認大小來處理引用SVG(沒有寬度和高度)的iframe ：300px寬度和150px高度。在以前的情況下，當IE使用默認高度150px時，它假定寬度為100％。但是，使用iframe ，所有三個瀏覽器都將iframe的高度和寬度都設置為固定的300px x 150px大小。

Applying width:100% stretches the iframe to fill the width of the container, but it does not change the height—it is still fixed at 150px; even when the container and the iframe shrink to a width less than the original width of the SVG, the iframe still maintains a 150px height, resulting in white space appearing at the top and bottom of the SVG. This happens in all three browsers.

應用width:100%拉伸iframe以填充容器的寬度，但不會更改高度-仍固定為150px；即使當容器和iframe縮小到小于SVG原始寬度的寬度時，iframe仍保持150px的高度，導致SVG頂部和底部出現空白。這在所有三個瀏覽器中都會發生。

The only way to change the height of the SVG is by explicitly setting it on the iframe. Of course, the height then, along with the width, form the viewport inside which the SVG is positioned. And if you want the SVG to fit inside the viewport without any white space above it, under it, or to its sides, you need to make sure you set the height and width of the viewport (the iframe) such that the aspect ratio of the height to the width is the same as the aspect ratio of the height to the width of the SVG. The aspect ratio of the SVG canvas is the aspect ratio of the height and width of the viewBox. ( For a detailed explanation of how the SVG viewport and viewBox work, check the Resources section for a link to a thorough guide.)

更改SVG高度的唯一方法是在iframe上明確設置它。當然，高度然后與寬度一起形成了SVG定位在其中的視口。而且，如果您想讓SVG裝在視口中，而在視口上方，下方或側面沒有任何空白，則需要確保設置視口( iframe )的高度和寬度，以使SVG的寬高比高度與寬度的比值與SVG的高度與寬度的縱橫比相同。 SVG畫布的縱橫比是viewBox的高度和寬度的縱橫比。 (有關SVG視口和viewBox如何工作的詳細說明，請參見參考資料部分，以獲取到完整指南的鏈接。 )

There is no “standard”, non-hacky way in CSS to create an element with a specific height-to-width ratio. However, a few years back, Thierry Koblentz posted an article on A List Apart explaining a technique—known today as The Padding Hack—that makes it possible to create intrinsic ratios for videos and iframes.

CSS中沒有“標準”的，非hacky的方式來創建具有特定的高寬比的元素。但是，幾年前，蒂埃里·科布倫茲(Thierry Koblentz)在A List Apart上發表了一篇文章，解釋了一種技術(今天稱為The Padding Hack) ，該技術可以為視頻和iframe創建內在比率。

The idea behind the padding hack is to make use of the relation of an element’s padding to its width. When the padding is set in percentages, the percentage is calculated relative to the width of the element, even if you’re setting the padding on the top of bottom of the element. That same technique can be used in the case of SVG to make the SVG fluid. The following are the steps for making the iframe referencing the SVG fluid. We’ll explain each step as we get to it.

填充hack背后的想法是利用元素的填充與其寬度的關系。如果將填充設置為百分比，則即使您將填充設置在元素底部的頂部，也將相對于元素的寬度計算百分比。在SVG的情況下，可以使用相同的技術來使SVG流動。以下是使iframe引用SVG流體的步驟。我們將逐步解釋每個步驟。

The SVG in the demos looks like this:

演示中的SVG如下所示：

填充黑客–步驟1(The Padding Hack – Step 1)

The first step in making the SVG responsive when it is embedded in an iframe is the same step we did before: remove the height and width attribute from the root <svg> element.

將SVG嵌入到iframe時使其具有響應性的第一步與我們之前所做的步驟相同：從根<svg>元素中刪除height和width屬性。

填充黑客–步驟2(The Padding Hack – Step 2)

Next, make sure you set the viewBox on the <svg>. In most cases, the SVG will have a viewBox specified, so you want to keep that.

接下來，請確保在<svg>上設置viewBox 。在大多數情況下，SVG將指定一個viewBox ，因此您要保留該viewBox 。

You don’t need to explicitly set the preserveAspectRatio because its default value (xMidYMid meet) is the value we would want to set anyway. So, unless the value of preserveAspectRatio is set to something else, you don’t really have to set it.

你并不需要明確設置不preserveAspectRatio ，因為它的默認值( xMidYMid meet )是我們將要設置反正值。所以，除非值preserveAspectRatio設置為別的東西，你真的沒有設置它。

填充黑客–步驟3(The Padding Hack – Step 3)

In order for the padding hack to work, the SVG needs to be wrapped in a container. Since the containing element is just that—a container—we’re going to use a generic div. This container is going to get the intrinsic ratio using the padding hack (next step), and then the iframe referencing the SVG will be scaled to fit inside the container.

為了使hack生效，需要將SVG包裝在一個容器中。由于containing元素就是容器(容器)，因此我們將使用通用div 。該容器將使用padding hack(下一步)獲取固有比率，然后將參照SVG的iframe縮放以適合容器內部。

填充黑客–步驟4(The Padding Hack – Step 4)

Next, we apply some styles to the container following these rules:

接下來，我們遵循以下規則將一些樣式應用于容器：

.container {height: 0; /* collapse the container's height */width: width-value; /* specify any width you want (a percentage value, basically) *//* apply a padding using the following formula *//* this formula makes sure the aspect ratio of the container equals that of the svg graphic */padding-top: (svg height / svg width) * width-value;position: relative; /* create positioning context for svg */ }

So, what exactly do the above rules do?

那么，以上規則到底是做什么的？

First, we collapse the container’s height. Since the padding is calculated relative to the width of the element, we’re going to only apply the padding to the element to expand it vertically again. Any additional height will throw off the aspect ratio we need.

首先，我們折疊容器的高度。由于填充是相對于元素的寬度計算的，因此我們僅將填充應用于元素以再次垂直擴展。任何額外的高度都會使我們失去所需的長寬比。

After you specify the width of the container—which you’ll usually set to be fluid in the page using a percentage value—a padding is applied to the top (or bottom) of the container, following the above formula. This formula uses the values of the height and width attributes of the <svg> (the ones we removed in Step 1) to specify a padding value that allows the intrinsic ratio of the container to match that of the svg.

在指定容器的寬度(通常在頁面中使用百分比值將其設置為流暢的寬度)之后，按照上述公式，將填充物應用于容器的頂部(或底部)。此公式使用<svg>的height和width屬性的值(我們在步驟1中刪除的值)來指定填充值，該填充值允許容器的固有比率與svg的固有比率匹配。

In our logo example, the width of the svg is 194px and the height is 186px. I’ve set the container’s width to 50%, so that it takes up half the available horizontal space. The padding applied to the container is equal to (186 / 194) * 50 = 48%. So, the code for the container looks like the following:

在我們的徽標示例中， svg的寬度為194px，高度為186px。我已將容器的寬度設置為50％，以使其占據可用水平空間的一半。應用于容器的填充等于(186 / 194) * 50 = 48% 。因此，容器的代碼如下所示：

.container {width: 50%;height: 0;padding-top: 48%;position: relative; }

Because the container’s height has been collapsed, and a fairly large amount of padding is applied to the top of it, its content—the SVG iframe—is pushed down so that it no longer “sits” inside the container anymore.

由于容器的高度已經塌陷，并且在其頂部施加了大量填充，因此將其內容(SVG iframe向下推，以使其不再“坐在”容器內部。

In order to “pull” the SVG back up, we’re going to position the iframe absolutely inside the container. This is where the position: relative; comes into play—it is used to create a positioning context for the SVG.

為了“拉”回SVG，我們將iframe完全定位在容器內。這是position: relative; 發揮作用-用于創建SVG的定位上下文。

填充黑客–步驟5 (The Padding Hack – Step 5)

Now that we have a positioning context, we’re going to position the iframe absolutely inside the container, and scale it so that it has the container’s height and width:

現在我們有了一個定位上下文，我們將把iframe完全定位在容器內，并對其進行縮放，使其具有容器的高度和寬度：

iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; }

That’s all you need for the SVG to be fluid. The iframe comes with a default border; you’ll probably want to get rid of that by adding border: none; to the above rule set.

這就是使SVG流暢所需的全部。 iframe帶有默認邊框；您可能想通過添加border: none;來消除這種情況border: none; 遵守上述規則集。

Check the demo out. The demo shows the iframe with and without the padding hack inside its container. Resize the screen to see how the SVG responds in both cases.

查看演示。 該演示演示了在容器內是否包含填充hack的iframe 。 調整屏幕大小，以查看SVG在兩種情況下的響應。

使用<svg>標簽的SVG嵌入式內聯 (SVG embedded inline using the <svg> tag)

An SVG can be embedded inline in an HTML document using the <svg> tag.

可以使用<svg>標簽將SVG內嵌在HTML文檔中。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186"> </svg>

An inline svg‘s viewport is established by the height and width specified on the root <svg> element. Once the width and height attributes are removed, all browsers assume a width equal to 100% and stretch the SVG horizontally to fit the width of its container.

內聯svg的視口由根<svg>元素上指定的高度和寬度建立。移除width和height屬性后，所有瀏覽器都將假定寬度等于100％，并水平拉伸SVG以適應其容器的寬度。

In Chrome and Firefox, the height of the SVG is calculated by the browser so that the SVG scales as expected. No extra work is needed to make the SVG fluid.^[1]

在Chrome和Firefox中，SVG的高度由瀏覽器計算，因此SVG可以按預期縮放。無需額外的工作即可使SVG變得流暢。 ^[1]

In Internet Explorer (tested in version 9 and 11), the height is assumed to be 150px again, with the width of 100%. Just like in the case of the img embed, this height is fixed so that when the SVG shrinks on smaller screens, the SVG will contain white space above and below the content inside it. In the case of the img embed, explicitly specifying width: 100% was enough to fix this; however, setting the width to 100% on the inline svg does not fix it. So we’re left in a situation similar to that of the iframe embed. The only way to make the inline SVG fluid in this case is by using the padding hack as we did in the iframe case. The HTML and CSS would look like the following:

在Internet Explorer(在版本9和11中進行測試)中，高度再次假定為150px，寬度為100％。就像嵌入img的情況一樣，此高度是固定的，因此當SVG在較小的屏幕上縮小時，SVG將在其內部內容的上方和下方包含空白。在嵌入img的情況下，顯式指定width: 100%足以解決此問題；但是，將內嵌svg的寬度設置為100％并不能解決問題。因此，我們處于與嵌入iframe類似的情況。在這種情況下，使內聯SVG流暢的唯一方法是像在iframe情況下那樣使用padding hack。 HTML和CSS如下所示：

<div class="container"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186"> .container {width: 50%;height: 0;padding-top: 48%;position: relative; }svg {position: absolute;top: 0;left: 0; }

Note that, unlike the iframe, the svg does not need a height and width set to fit inside the container. It wouldn’t hurt if you added them, but they’re not necessary in this case.

請注意，與iframe不同， svg不需要將高度和寬度設置為適合容器內部。如果添加它們，不會有什么壞處，但是在這種情況下，它們不是必需的。

You can check out the demo.

您可以查看演示。

[1] Note: At the time of writing of this article, the latest version of Chrome on Windows (Version 36.0.1985.143 m) also needs the padding hack to work. The SVG does scale well in general, but it seems to not go any smaller than its original dimensions. So, when the container is shrunk so that its width becomes less than the initial width of the SVG, the SVG sticks out (overflows). The padding hack fixes it. A test in Chrome Canary showed that this issue was non-existent; so hopefully the hack won’t be needed in the next stable update.

[1]注意：在撰寫本文時，Windows上的最新版本的Chrome(版本36.0.1985.143 m)也需要使用padding hack才能正常工作。 SVG總體上可以很好地縮放，但是它看起來并沒有比其原始尺寸小。因此，當容器收縮后，其寬度變得小于SVG的初始寬度時，SVG會伸出(溢出)。 padding hack修復了它。 Chrome Canary的一項測試表明此問題不存在；因此，希望在下一個穩定更新中不再需要該hack。

使用CSS嵌入為背景圖像的SVG (SVG embedded as a background image using CSS)

One of the popular ways to embed an SVG is using a background image on an element. The following snippet shows an element with an SVG background image:

嵌入SVG的一種流行方法是在元素上使用背景圖像。以下代碼片段顯示了具有SVG背景圖像的元素：

.element {background-image: url(my_SVG_image.svg);/* other styles */ }

Luckily, we don’t have to apply any fixes or hacks to make an SVG background image behave as expected—an SVG background image can be positioned, tiled, sized, and scaled as any bitmap background image can.

幸運的是，我們不必進行任何修復或修改即可使SVG背景圖像表現出預期的效果-SVG背景圖像可以像任何位圖背景圖像一樣進行定位，平鋪，調整大小和縮放比例。

Check out the live demo showing a simple example of the above logo being used as a background image of a fluid element.

查看現場演示，該演示顯示了上述徽標的一個簡單示例，該徽標被用作流體元素的背景圖像。

In the demo, I’ve used the padding hack so that the element has an intrinsic ratio similar to that of the SVG. You may or may not want/need to do this. I did this for demonstration purposes only so that the SVG fits exactly into the background at all times. I just collapsed the height of the element, and then applied the padding to get the aspect ratio I wanted. Without doing this, and because the element is empty in the demo, it would have collapsed anyway and the background image wouldn’t have been visible.

在演示中，我使用了padding hack，因此該元素的固有比率與SVG相似。您可能會或可能不想/需要這樣做。我這樣做只是出于演示目的，因此SVG始終完全適合背景。我只是折疊元素的高度，然后應用填充以獲得所需的寬高比。否則，由于該元素在演示中為空，因此無論如何它都將折疊并且背景圖像將不可見。

使用CSS媒體查詢使SVG具有自適應性 (Making SVGs adaptive Using CSS Media Queries)

The fact that the graphical elements inside an SVG are created using XML makes working with SVGs very liberating. Because SVG content is made up of XML tags that render graphics, we can select individual elements and apply specific styles to them, just like we can select HTML elements, using CSS selectors.

SVG內部的圖形元素是使用XML創建的，這使得使用SVG變得非常自由。由于SVG內容由呈現圖形的XML標簽組成，因此我們可以選擇單個元素并對其應用特定的樣式，就像我們可以使用CSS選擇器選擇HTML元素一樣。

Just like you can change the styles of an HTML element—like background color, borders, etc.—you can change certain styles of an SVG element using CSS. SVG elements are usually styled using presentation attributes like fill, stroke, transform, and many others. However, only a subset of all presentation attributes can be set using CSS. You can find a list of SVG styling properties that can be set using CSS available in the SVG Styling specification. The list of attributes that can be set using CSS properties currently does not include the x, y, width, and height attributes; but these four will be added to the list and we will be able to set them using CSS in SVG2.

就像您可以更改HTML元素的樣式(例如背景色，邊框等)一樣，您可以使用CSS更改SVG元素的某些樣式。 SVG元素通常使用諸如fill ， stroke ， transform等許多表示屬性來設置樣式。但是，只能使用CSS設置所有演示屬性的子集。 您可以找到SVG樣式屬性的列表，可以使用SVG樣式規范中提供的CSS進行設置。 當前可以使用CSS屬性設置的屬性列表不包括x ， y ， width和height屬性； height見圖4。但是這四個將添加到列表中，我們將能夠在SVG2中使用CSS進行設置。

Some of the most commonly set styles using CSS include fill, which works similar to a background color on many elements; stroke, which is similar to border; opacity, display, transform, and a few others.

一些使用CSS設置的最常用的樣式包括fill ，它的作用類似于許多元素的背景色； stroke ，類似于border ; opacity ， display ， transform和其他一些。

For the logo we have in our demos, we’re going to use the img tag to reference it. After applying the fix mentioned earlier to make the SVG fluid, we’re going to hide some elements on smaller screens, and change the fill color of others, thus slightly changing how it looks on different screen sizes that we’ll specify in the CSS media queries.

對于演示中具有的徽標，我們將使用img標簽引用它。在應用了前面提到的修復程序以使SVG流暢之后，我們將在較小的屏幕上隱藏一些元素，并更改其他元素的填充顏色，從而略微更改在CSS中指定的不同屏幕尺寸下的外觀媒體查詢。

We’re going to add the media queries inside a <style> tag inside the root <svg>. The following is how the SVG file we’re going to be referencing looks like:

我們將在根<svg>內的<style>標記內添加媒體查詢。以下是我們將要引用的SVG文件的外觀：

And we’re going to reference the logo using an <img> tag like so:

我們將使用<img>標記來引用徽標，如下所示：

At this point, it’s time to point out that the sizes specified in the media queries refer to the size of the SVG viewport, except for when the SVG is embedded inline in the document using an <svg> tag. The SVG viewport is defined by the dimensions of the element referencing the SVG. For example, in the case when the SVG is referenced in an img tag, the width and height of the img specify the viewport. In other words, the conditions specified in the media queries apply to the img tag, so that (width: 30em) would apply styles to the SVG when the img is 30em wide.

現在，需要指出的是，媒體查詢中指定的大小是指SVG視口的大小，除非使用<svg>標記將SVG內聯嵌入文檔中。 SVG視口由引用SVG的元素的尺寸定義。例如，在所述情況下，當SVG是在引用img標簽，所述的寬度和高度img指定視口中。換句話說，在媒體查詢中指定的條件適用于img標簽，以使得(width: 30em)將適用樣式到SVG當img是30em寬。

That said, here is the markup for the SVG. Each of the elements inside it has an ID that we’re going to use in the CSS to select and style it:

也就是說，這是SVG的標記。其中的每個元素都有一個ID，我們將在CSS中使用該ID來選擇和設置其樣式：

Using a <style> tag inside the SVG, we’re going to specify the media queries that will change the SVG’s styles depending on the size of the viewport. The SVG will change as shown in the following image:

在SVG中使用<style>標簽，我們將指定媒體查詢，這些查詢將根據視口的大小來更改SVG的樣式。 SVG將更改，如下圖所示：

We’re only going to be using the CSS fill and opacity properties. As the viewport size decreases, the curvy background is first removed by setting its opacity to zero, and the fill color of the remaining content of the SVG is changed from white to dark navy. As the screen gets smaller, the text part of the logo is removed so that it takes up less screen estate. And finally, the circle surrounding the icon is removed and only the anchor icon remains on very small screens.

我們將只使用CSS fill和opacity屬性。隨著視口大小的減小，首先通過將曲線的不透明度設置為零來移除曲線背景，然后將SVG剩余內容的填充顏色從白色變成深海軍。隨著屏幕變小，徽標的文本部分將被刪除，從而占用更少的屏幕空間。最后，圖標周圍的圓圈被刪除，只有錨點圖標保留在非常小的屏幕上。

Adding the media queries, our SVG file looks like this:

添加媒體查詢后，我們的SVG文件如下所示：

First, I added a transition to the elements inside the SVG so that they fade in and out and change color smoothly over the course of 0.1 seconds. Then, for each media query, part of the SVG is hidden.

首先，我為SVG內部的元素添加了一個過渡，以便它們在0.1秒內淡入淡出，并平滑地更改顏色。然后，對于每個媒體查詢，部分SVG被隱藏。

Check the demo out and make sure to resize the screen to see the logo adapt.

簽出演示，并確保調整屏幕大小以查看徽標的適應性。

Note that at the time of writing of this article, there is a bug in Chrome where the styles specified in a media query rule set are only applied if the query condition is specified in pixels. Queries specified in em don’t currently work. So, in order to make the demo work in Chrome, the media queries are set in pixels instead of em. You can check the state of this bug in this bug report.

請注意，在撰寫本文時，Chrome中存在一個錯誤，該錯誤僅在以像素為單位指定查詢條件時才應用媒體查詢規則集中指定的樣式。 em指定的查詢當前不起作用。因此，為了使演示在Chrome中工作，媒體查詢以像素而不是em 。您可以在此錯誤報告中檢查此錯誤的狀態。

Changing logos like this is one of several ways to make them responsive. Some company logos may take more screen estate on small screens than necessary, so we see a lot of logos adapt to this by getting rid of the textual part of the logo and leaving only the icon. Without SVG, this would be achieved by switching PNGs on different screen sizes. Not only can the bitmap logo look bad on high-resolution screens, but having to maintain two or more images just to hide parts of the logo isn’t very efficient. This is why SVGs would be a great choice for logos—they look good everywhere, and you can select specific parts using CSS and hide them as needed without having to maintain multiple files.

像這樣更改徽標是使它們響應的幾種方法之一。一些公司徽標在小屏幕上占用的屏幕空間可能比不必要的多，因此，我們看到很多徽標通過擺脫徽標的文本部分而僅保留圖標來適應這種情況。如果沒有SVG，則可以通過在不同屏幕尺寸上切換PNG來實現。位圖徽標不僅在高分辨率屏幕上看起來不佳，而且僅保留兩個或更多圖像以隱藏徽標的一部分并不是很有效。這就是為什么SVG將是徽標的絕佳選擇的原因-徽標在任何地方都看起來不錯，并且您可以使用CSS選擇特定的部分并根據需要隱藏它們而無需維護多個文件。

結語 (Wrapping Up)

SVG implementations in evergreen browsers such as Chrome and Firefox are getting better by the day; so keep in mind that some of the information in this article may change any time in the future.

Chrome和Firefox等常綠瀏覽器中的SVG實施日趨完善。因此請記住，本文中的某些信息將來可能會隨時更改。

Issues occurring in Internet Explorer, however, will persist due to the fact that certain versions will still be around for quite some time, so the fixes mentioned above will still hold and be useful during that time.

但是，由于某些版本仍然存在很長一段時間，Internet Explorer中出現的問題將繼續存在，因此上述修復程序將繼續存在并在此期間有用。

SVGs are pretty great when it comes to creating responsive resolution-independent logos (and other graphics, for the matter). Of course, using media queries to adapt the SVG to different media conditions goes beyond customizing logos. You can animate shapes into other shapes (you might need JavaScript to help with this in some cases), customize colors, change fonts, show and hide items, and much more. Feel free to explore the possibilities and different use cases.

SVG在創建與分辨率無關的響應徽標(就此而言，還包括其他圖形)方面非常出色。當然，使用媒體查詢使SVG適應不同的媒體條件不只是自定義徽標。您可以將形狀設置為其他形狀(在某些情況下可能需要JavaScript才能提供幫助)，自定義顏色，更改字體，顯示和隱藏項目等等。隨意探索可能性和不同的用例。

I hope you found this article useful. Thank you for reading!

希望本文對您有所幫助。 感謝您的閱讀！

You can download all examples shown in this tutorial here: Responsive SVGs demos

您可以在此處下載本教程中顯示的所有示例：響應式SVG演示

資源和進一步閱讀(Resources and Further Reading)

More about the SVG viewport and how content is rendered inside it: Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, and preserveAspectratio – by me.
有關SVG視口以及如何在其中呈現內容的更多信息：我了解SVG坐標系和轉換(第1部分)–視口， viewBox和preserveAspectratio 。
How Media Queries Allow You to Optimize SVG Icons for Several Sizes – An article (and screencast) by Opera’s Andreas Bovens on the Dev.Opera blog.
媒體查詢如何允許您針對多種尺寸優化SVG圖標– Opera的Andreas Bovens在Dev.Opera博客上發表的文章(和屏幕錄像)。

Do you know of any other weird browser inconsistencies regarding responsive SVGs? What about tips and use cases for adaptive SVGs? Don’t hesitate to share them in the comments section below!

您是否知道其他與響應式SVG有關的奇怪的瀏覽器不一致之處？自適應SVG的技巧和用例如何？請不要在下面的評論部分中分享它們！

翻譯自: https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/