<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>skalowane ikony Archives - ISPRO® - Systemy Internetowe</title>
	<atom:link href="https://www.ispro.pl/blog/tag/skalowane-ikony/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ispro.pl/blog/tag/skalowane-ikony/</link>
	<description>ISPRO® realizuje audyty stron www i systemy informatyczne CMS oraz CRM na zamówienie. Rozwiązania do sprzedaży online, systemy zamawiania odbitek i pieczątek przez Internet.</description>
	<lastBuildDate>Mon, 24 Mar 2014 00:57:00 +0000</lastBuildDate>
	<language>pl-PL</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>Rozmiar ma znaczenie, czyli jak najlepiej skalować ikony</title>
		<link>https://www.ispro.pl/rozmiar-ma-znaczenie-czyli-jak-najlepiej-skalowac-ikony/</link>
					<comments>https://www.ispro.pl/rozmiar-ma-znaczenie-czyli-jak-najlepiej-skalowac-ikony/#respond</comments>
		
		<dc:creator><![CDATA[Piotr Potiopa]]></dc:creator>
		<pubDate>Sun, 23 Mar 2014 20:04:42 +0000</pubDate>
				<category><![CDATA[HTML / CSS]]></category>
		<category><![CDATA[aplikacje mobilne]]></category>
		<category><![CDATA[font-face]]></category>
		<category><![CDATA[grafika wektorowa]]></category>
		<category><![CDATA[Grunticon]]></category>
		<category><![CDATA[skalowane ikony]]></category>
		<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">http://www.ispro.pl/?p=2909</guid>

					<description><![CDATA[<p>Mamy tu do czynienia z pewną klęską urodzaju: olbrzymi wybór różnych ekranów, a co za tym idzie &#8211; rozdzielczości, zmusza grafików do nieustannej gimnastyki, czyli dostosowywania stron i aplikacji www poprzez skalowane ikony. Jednym z rozwiązań jest osadzanie ikon jako czcionki (poprzez @font-face), pomagają w tym aplikacje takie jak http://icomoon.io/app/. Można też wykorzystać zalety grafiki wektorowej [&#8230;]</p>
<p>The post <a href="https://www.ispro.pl/rozmiar-ma-znaczenie-czyli-jak-najlepiej-skalowac-ikony/">Rozmiar ma znaczenie, czyli jak najlepiej skalować ikony</a> appeared first on <a href="https://www.ispro.pl">ISPRO® - Systemy Internetowe</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Mamy tu do czynienia z pewną klęską urodzaju: olbrzymi wybór różnych ekranów, a co za tym idzie &#8211; rozdzielczości, zmusza grafików do nieustannej gimnastyki, czyli dostosowywania stron i<strong> aplikacji www</strong> poprzez skalowane ikony. Jednym z rozwiązań jest <strong>osadzanie ikon jako czcionki</strong> (poprzez @font-face), pomagają w tym aplikacje takie jak <a href="http://icomoon.io/app/" target="_blank">http://icomoon.io/app/</a>. Można też wykorzystać zalety <strong>grafiki wektorowej w formacie SVG</strong> i skorzystać z takich narzędzi jak <strong>Grunticon</strong>. Warto poznać wady i zalety obu rozwiązań, zanim zdecydujemy na wdrożenie któregoś z nich w naszym projekcie.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#1</span>Co zrobić, jeśli komplikujemy sobie życie udziwniając fonty, różnicując je w obrębie strony lub stosując niestandardowe?</h3>
<p>SVG daje szansę<strong> zróżnicowania rangi ikon</strong> i ładowania ich osobno, najpierw te bardziej znaczące, później kolejne, mniej potrzebne użytkownikom. Font-face pozwala na <strong>różnicowanie fontów</strong>. Jeden do tekstu, inny do ikon. Można? Można.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#2</span>Niektóre urządzenia mają problem z &#8222;Private Unicode Area&#8221;</h3>
<p>W zwiazku z tym, że jest możliwość nadpisywania znaków (glyphs) w &#8222;Private Unicode Area&#8221; i wykorzystania tego mechanizmu do serwowania wybranych znaków,  istnieją urządzenia które ten mechanizm wykorzystują. Zapisywanie tych znaków może nastepować w różnych zakresach  standardu Unicode, stąd powoduje to konflikty.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#3</span>Czarne kwadraty i krzyżyki na Opera Mini oraz inne zniekształcenia.</h3>
<p>Nie da się przewidzieć wszystkich problemów, które mogą zaistnieć na różnych stronach. 100-procentowego poczucia bezpieczeństwa nigdy mieć nie będziecie, ale według niektórych znawców tematu, dzięki SVG możecie chociaż trochę odetchnąć. <strong>Polecam tekst Iana Feathera</strong> <a href="http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/">TU</a>.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#4</span>Chrome Canary i Beta robią z fontem straszne rzeczy.</h3>
<p>Zauważyliście? Z SVG nie ma tego problemu. Po prostu.<br />
Jednocześnie: w stabilnej wersji Chrome face-font sobie radzi bez problemów.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#5</span>W Firefoksie ikony są wyraźniejsze&#8230;</h3>
<p>&#8230; w efekcie nie do końca jesteśmy w stanie zapanować nad ostatecznym wyglądem strony. Z SVG możemy<strong> normalizować wygląd </strong>wszystkich elementów dla każdej przeglądarki.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#6</span>Wygenerowane treści.</h3>
<p>Jeśli chcesz użyć font-icon w CSS musisz je prawidłowo skojarzyć z <strong>wygenerowanymi treściami</strong>. Nie zawsze jest to łatwe, zwłaszcza, jeśli masz już spory zasób <strong>&#8222;:before&#8221; i &#8222;:after&#8221;</strong>. Można oczywiście kombinować z umieszczeniem ich w linii, ale wiadomo, że to się może skończyć pominięciem lub zapomnieniem, zwłaszcza w dużych aplikacjach. W SVG nie ma tego problemu &#8211; <strong>możesz stosować wiele warstw i umieszczać ikony chociażby w tle innych treści</strong>.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#7</span>Umieszczanie wszystkich elementów we właściwych miejscach wcale nie jest łatwe.</h3>
<p>Z face-font &#8211; warto dodać. SVG daje możliwość rozdzielenia na <strong>poszczególne warstwy</strong> konkretnych treści i <strong>kombinowanie z rozmiarami pod kątem poszczególnych przeglądarek</strong>.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#8</span>Chcemy multikoloru.</h3>
<p>I jesteśmy skazani na SVG, bo tylko tam mamy opcję multikolor, a nie pojedyncze kolory, jak w przypadku font-face. Teoretycznie, nawet w font-face możemy problem obejść, <strong>stosując warstwy przy tworzeniu ikon</strong>. Jest to jednak działanie ryzykowne. Jednocześnie, należy zaznaczyć, że <strong>font-face ma więcej możliwości działań związanych z kolorami</strong>. Na dodatek, łatwo się z nich korzysta.</p>
<h3><span class='av_dropcap1 av-av_dropcap1-3cd9da5fea0ef5fb27aee617571c39a3'>#9</span>Mamy ochotę na animację.</h3>
<p>I <strong>SVG</strong> nam na to pozwala. W przeciwieństwie do font-face.</p>
<h3>Podsumowując:</h3>
<p>Sporo zależy od projektu, jeszcze więcej od osobistych preferencji. Stawiacie na font-face czy SVG?</p>
<p>The post <a href="https://www.ispro.pl/rozmiar-ma-znaczenie-czyli-jak-najlepiej-skalowac-ikony/">Rozmiar ma znaczenie, czyli jak najlepiej skalować ikony</a> appeared first on <a href="https://www.ispro.pl">ISPRO® - Systemy Internetowe</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ispro.pl/rozmiar-ma-znaczenie-czyli-jak-najlepiej-skalowac-ikony/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
