このページは、「
backgroundに使うパターン用画像まとめ」のsvg版です。パターン用の小さなgif画像の替わりにsvgを使用しています。svgはベクター画像ですので、拡大しても劣化することはないため、サイズを変更して流用することができます。また、CSS用にエンコードしてページに埋め込んだ場合はリンク切れの心配がありません。
サンプルの（１）から（１４）までが、CSS用にエンコードしたものです。
サンプル（１）
sample1
サンプル（１）CSSソース
.sample1 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'
width='7' height='7' viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 r=%220.25%22 opacity='0.3'
%2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 opacity='0.3' %2F%3E %3C%2Fsvg%3E");
}
サンプル（２）
sample2
サンプル（２）CSSソース
.sample2 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'
width='7' height='7' fill=%22violet%22 viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22
r=%220.25%22 fill=%22violet%22 opacity='0.8' %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22
fill=%22violet%22 opacity='0.8' %2F%3E %3C%2Fsvg%3E");
}
サンプル（３）
sample3
サンプル（３）CSSソース
.sample3 {
background: #f7d292 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'
width='7' height='7' viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 r=%220.25%22
fill=%22%23ffffff%22 opacity='1' %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 fill=%22%23ffffff%22
opacity='1' %2F%3E %3C%2Fsvg%3E");
}
サンプル（４）
sample4
サンプル（４）CSSソース
.sample4 {
background: #C3C3ED url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'
width='7' height='7' viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 r=%220.25%22
fill=%22%23ffffff%22 opacity='1' %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 fill=%22%23ffffff%22
opacity='1' %2F%3E %3C%2Fsvg%3E");
}
サンプル（５）
sample5
サンプル（５）CSSソース
.sample5 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'
width='14' height='14' viewBox=%220 0 4 4%22%3E %3Ccircle cx=%220.5%22 cy=%220.5%22 r=%220.5%22 opacity='0.25'
%2F%3E %3Ccircle cx=%222.5%22 cy=%222.5%22 r=%220.5%22 opacity='0.25' %2F%3E %3C%2Fsvg%3E ");
}
サンプル（６）
sample6
サンプル（６）CSSソース
.sample6 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'
width='14' height='14' viewBox=%220 0 4 4%22%3E %3Ccircle cx=%220.5%22 cy=%220.5%22 r=%220.5%22
fill=%22%238cbfed%22 opacity='0.7' %2F%3E %3Ccircle cx=%222.5%22 cy=%222.5%22 r=%220.5%22 fill=%22%238cbfed%22
opacity='0.7' %2F%3E %3C%2Fsvg%3E");
}
サンプル（７）
sample7
サンプル（７）CSSソース
.sample7 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%226%22 height=%226%22 viewBox=%220 0 6 6%22%3E %3Crect x=%22-0.01%22 y=%22-0.01%22 fill=%22%23FFFFFF%22
width=%226%22 height=%226%22%2F%3E %3Crect x=%221.49%22 y=%221.49%22 transform=%22matrix(0.7071 -0.7071 0.7071 0.7071 -1.2386 2.9902)%22 fill=%22none%22 stroke=%22%23BADD83%22 width=%223%22 height=%223%22%2F%3E %3C%2Fsvg%3E");
}
サンプル（８）
sample8
サンプル（８）CSSソース
.sample8 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%226%22 height=%226%22 viewBox=%220 0 6 6%22%3E %3Crect x=%22-0.01%22 y=%22-0.01%22 fill=%22%23FFFFFF%22
width=%226%22 height=%226%22%2F%3E %3Crect x=%221.49%22 y=%221.49%22 transform=%22matrix(0.7071 -0.7071 0.7071 0.7071 -1.2386 2.9902)%22 fill=%22none%22 stroke=%22%2383DBD1%22 width=%223%22 height=%223%22%2F%3E %3C%2Fsvg%3E");
}
サンプル（９）
sample9
サンプル（９）CSSソース
.sample9 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%228px%22 height=%228px%22 viewBox=%220 0 8 8%22%3E %3Crect x=%224%22 y=%222%22 fill=%22%23B7C5F7%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%224%22 fill=%22%23B7C5F7%22 width=%222%22
height=%222%22%2F%3E %3Cpolyline fill=%22%23B7C5F7%22 points=%220%2C8 0%2C6 2%2C6 2%2C8 %22%2F%3E %3Cpolyline
fill=%22%23B7C5F7%22 points=%224%2C8 4%2C6 6%2C6 6%2C8 %22%2F%3E %3Crect x=%226%22 y=%224%22 fill=%22%23B7C5F7%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 fill=%22%23B7C5F7%22 width=%222%22 height=%222%22%2F%3E %3C%2Fsvg%3E");
}
サンプル（１０）
sample10
サンプル（１０）CSSソース
.sample10 {
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%228px%22 height=%228px%22 viewBox=%220 0 8 8%22%3E %3Crect x=%224%22 y=%222%22 fill=%22%23D7ADE0%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%224%22 fill=%22%23D7ADE0%22 width=%222%22
height=%222%22%2F%3E %3Cpolyline fill=%22%23D7ADE0%22 points=%220%2C8 0%2C6 2%2C6 2%2C8 %22%2F%3E %3Cpolyline
fill=%22%23D7ADE0%22 points=%224%2C8 4%2C6 6%2C6 6%2C8 %22%2F%3E %3Crect x=%226%22 y=%224%22 fill=%22%23D7ADE0%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 fill=%22%23D7ADE0%22 width=%222%22 height=%222%22%2F%3E %3C%2Fsvg%3E");
}
サンプル（１１）
sample11
サンプル（１１）CSSソース
.sample11 {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%2235.43px%22 height=%2235.43px%22 viewBox=%220 0 35.43 35.43%22%3E %3Cg%3E %3Cpath fill=%22%2390C9D6%22 d=%22M12.399%2C0.006L12.399%2C0.006L12.399%2C0.006L12.399%2C0.006z
M5.313%2C0.006L5.313%2C0.006L5.313%2C0.006L5.313%2C0.006z M15.942%2C1.778V0.007H12.4l5.314%2C5.314l-0.886%2C0.886l-5.315-5.315l0.886-0.885H8.856l1.771%2C1.771L8.856%2C3.55l0.886%2C0.886 L8.856%2C5.322L7.971%2C4.436L8.856%2C3.55L7.085%2C1.778l1.771-1.771H5.313l0.886%2C0.886L0.884%2C6.208l-0.886-0.886v3.543l1.772-1.771 l1.771%2C1.771l0.886-0.886l0.886%2C0.886L4.428%2C9.75L3.542%2C8.865l-1.771%2C1.772l-1.772-1.772v3.542l0.886-0.885l5.315%2C5.315 l-0.886%2C0.886l-5.315-5.315v3.543h1.772v1.772h14.172v-1.772h1.772V1.778H15.942z
M17.715%2C8.865l-1.772%2C1.772l-1.771-1.772 L13.285%2C9.75l-0.886-0.886l0.886-0.886l0.886%2C0.886l1.771-1.771L17.715%2C8.865z M12.399%2C10.636l-1.771%2C1.771l-0.886-0.886 l1.771-1.772L12.399%2C10.636z M11.514%2C2.664l3.543%2C3.543l-0.886%2C0.886L10.628%2C3.55L11.514%2C2.664z M10.628%2C5.321l1.771%2C1.771 l-0.886%2C0.886L9.742%2C6.207L10.628%2C5.321z
M8.856%2C7.093l1.771%2C1.772l-1.771%2C1.771L7.085%2C8.865L8.856%2C7.093z M7.971%2C6.208 L6.199%2C7.979L5.313%2C7.093l1.771-1.771L7.971%2C6.208z M3.542%2C7.093L2.656%2C6.208l3.543-3.543L7.085%2C3.55L3.542%2C7.093z M6.199%2C9.75 l1.771%2C1.772l-0.886%2C0.886l-1.771-1.772L6.199%2C9.75z M6.199%2C15.065l-3.544-3.543l0.887-0.886l3.543%2C3.544L6.199%2C15.065z M8.856%2C17.723l-1.771-1.772l1.771-1.771l-0.886-0.886l0.886-0.886l0.886%2C0.886L8.856%2C14.18l1.771%2C1.771L8.856%2C17.723z M14.171%2C10.636l0.886%2C0.886l-3.543%2C3.543l-0.886-0.886L14.171%2C10.636z M12.399%2C17.723l-0.886-0.886l5.315-5.315l0.886%2C0.886 L12.399%2C17.723z M-0.002%2C12.408L-0.002%2C12.408L-0.002%2C12.408L-0.002%2C12.408z M1.771%2C0.007v1.771h-1.772v3.543l5.315-5.315H1.771z%22 %2F%3E %3Cpath fill=%22%2390C9D6%22 d=%22M30.116%2C0.006L30.116%2C0.006L30.116%2C0.006L30.116%2C0.006z
M23.03%2C0.006L23.03%2C0.006L23.03%2C0.006L23.03%2C0.006z M33.659%2C1.778V0.007h-3.543l5.314%2C5.314l-0.886%2C0.886L29.23%2C0.892l0.885-0.885h-3.542l1.771%2C1.771L26.573%2C3.55l0.886%2C0.886 l-0.886%2C0.886l-0.886-0.886l0.886-0.886l-1.771-1.771l1.771-1.771H23.03l0.886%2C0.886l-5.315%2C5.315l-0.886-0.886v3.543l1.771-1.772 l1.771%2C1.772l0.886-0.886l0.887%2C0.886L22.144%2C9.75l-0.886-0.886l-1.771%2C1.772l-1.771-1.772v3.542l0.886-0.885l5.314%2C5.315 l-0.886%2C0.886l-5.314-5.315v3.543h1.771v1.772h14.173v-1.772h1.772V1.778H33.659z M35.431%2C8.865l-1.771%2C1.772l-1.771-1.772 L31.002%2C9.75l-0.886-0.886l0.886-0.886l0.886%2C0.886l1.771-1.771L35.431%2C8.865z M30.116%2C10.636l-1.771%2C1.772l-0.886-0.886 L29.23%2C9.75L30.116%2C10.636z M29.23%2C2.664l3.543%2C3.543l-0.886%2C0.886L28.345%2C3.55L29.23%2C2.664z M28.345%2C5.321l1.771%2C1.771 L29.23%2C7.979l-1.772-1.771L28.345%2C5.321z
M26.573%2C7.093l1.771%2C1.771l-1.771%2C1.772l-1.771-1.772L26.573%2C7.093z M25.688%2C6.208 l-1.771%2C1.771L23.03%2C7.093l1.771-1.772L25.688%2C6.208z M21.258%2C7.093l-0.886-0.886l3.543-3.543l0.887%2C0.886L21.258%2C7.093z M23.915%2C9.75l1.772%2C1.772l-0.886%2C0.886l-1.772-1.772L23.915%2C9.75z M23.915%2C15.065l-3.543-3.543l0.886-0.886l3.543%2C3.544 L23.915%2C15.065z M26.573%2C17.723l-1.771-1.771l1.771-1.771l-0.886-0.886l0.886-0.886l0.886%2C0.886l-0.886%2C0.886l1.771%2C1.771 L26.573%2C17.723z M31.888%2C10.636l0.886%2C0.886l-3.543%2C3.543l-0.886-0.886L31.888%2C10.636z M30.116%2C17.723l-0.886-0.886l5.315-5.315 l0.886%2C0.886L30.116%2C17.723z
M17.715%2C12.408L17.715%2C12.408L17.715%2C12.408L17.715%2C12.408z M19.486%2C0.007v1.771h-1.771v3.543 l5.314-5.315H19.486z%22%2F%3E %3Cpath fill=%22%2390C9D6%22 d=%22M12.399%2C17.723L12.399%2C17.723L12.399%2C17.723L12.399%2C17.723z M5.313%2C17.723L5.313%2C17.723L5.313%2C17.723 L5.313%2C17.723z M15.942%2C19.494v-1.771H12.4l5.314%2C5.314l-0.886%2C0.886l-5.315-5.314l0.886-0.886H8.856l1.771%2C1.771l-1.771%2C1.771 l0.886%2C0.886l-0.886%2C0.887l-0.886-0.887l0.886-0.886l-1.771-1.771l1.771-1.771H5.313l0.886%2C0.886l-5.315%2C5.314l-0.886-0.886v3.544 l1.772-1.772l1.771%2C1.772l0.886-0.887l0.886%2C0.887l-0.886%2C0.885l-0.886-0.885l-1.771%2C1.771l-1.772-1.771v3.542l0.886-0.886 l5.315%2C5.315l-0.886%2C0.886l-5.315-5.314v3.543h1.772v1.771h14.172v-1.771h1.772V19.494H15.942z
M17.715%2C26.582l-1.772%2C1.771 l-1.771-1.771l-0.886%2C0.885l-0.886-0.885l0.886-0.887l0.886%2C0.887l1.771-1.772L17.715%2C26.582z M12.399%2C28.353l-1.771%2C1.772 l-0.886-0.887l1.771-1.771L12.399%2C28.353z M11.514%2C20.381l3.543%2C3.543l-0.886%2C0.886l-3.543-3.544L11.514%2C20.381z M10.628%2C23.038 l1.771%2C1.771l-0.886%2C0.886l-1.771-1.771L10.628%2C23.038z M8.856%2C24.811l1.771%2C1.771l-1.771%2C1.771l-1.771-1.771L8.856%2C24.811z M7.971%2C23.924l-1.771%2C1.771L5.313%2C24.81l1.771-1.771L7.971%2C23.924z M3.542%2C24.81l-0.886-0.886l3.543-3.543l0.886%2C0.886 L3.542%2C24.81z
M6.199%2C27.467l1.771%2C1.771l-0.886%2C0.887l-1.771-1.772L6.199%2C27.467z M6.199%2C32.781l-3.544-3.543l0.887-0.886 l3.543%2C3.544L6.199%2C32.781z M8.856%2C35.439l-1.771-1.771l1.771-1.771L7.971%2C31.01l0.886-0.885l0.886%2C0.885l-0.886%2C0.887l1.771%2C1.771 L8.856%2C35.439z M14.171%2C28.353l0.886%2C0.886l-3.543%2C3.543l-0.886-0.885L14.171%2C28.353z M12.399%2C35.439l-0.886-0.886l5.315-5.315 l0.886%2C0.886L12.399%2C35.439z M-0.002%2C30.124L-0.002%2C30.124L-0.002%2C30.124L-0.002%2C30.124z M1.771%2C17.724v1.771h-1.772v3.543 l5.315-5.314H1.771z%22%2F%3E %3Cpath fill=%22%2390C9D6%22 d=%22M30.116%2C17.723L30.116%2C17.723L30.116%2C17.723L30.116%2C17.723z M23.03%2C17.723L23.03%2C17.723L23.03%2C17.723 L23.03%2C17.723z M33.659%2C19.494v-1.771h-3.543l5.314%2C5.315l-0.886%2C0.886l-5.314-5.315l0.885-0.885h-3.542l1.771%2C1.772l-1.771%2C1.771 l0.886%2C0.886l-0.886%2C0.886l-0.886-0.886l0.886-0.886l-1.771-1.771l1.771-1.772H23.03l0.886%2C0.886l-5.315%2C5.314l-0.886-0.886v3.543 l1.771-1.771l1.771%2C1.772l0.886-0.887l0.887%2C0.887l-0.887%2C0.885l-0.886-0.885l-1.771%2C1.771l-1.771-1.772v3.543l0.886-0.886 l5.314%2C5.315l-0.886%2C0.886l-5.314-5.314v3.543h1.771v1.771h14.173v-1.771h1.772V19.494H33.659z
M35.431%2C26.581l-1.771%2C1.772 l-1.771-1.772l-0.886%2C0.886l-0.886-0.886l0.886-0.886l0.886%2C0.886l1.771-1.771L35.431%2C26.581z M30.116%2C28.353l-1.771%2C1.771 l-0.886-0.886l1.771-1.771L30.116%2C28.353z M29.23%2C20.381l3.543%2C3.543l-0.886%2C0.886l-3.543-3.544L29.23%2C20.381z M28.345%2C23.037 l1.771%2C1.772l-0.886%2C0.886l-1.772-1.771L28.345%2C23.037z M26.573%2C24.81l1.771%2C1.772l-1.771%2C1.771l-1.771-1.771L26.573%2C24.81z M25.688%2C23.924l-1.771%2C1.771L23.03%2C24.81l1.771-1.771L25.688%2C23.924z M21.258%2C24.81l-0.886-0.886l3.543-3.543l0.887%2C0.886 L21.258%2C24.81z M23.915%2C27.467l1.772%2C1.771l-0.886%2C0.886l-1.772-1.771L23.915%2C27.467z M23.915%2C32.781l-3.543-3.543l0.886-0.886 l3.543%2C3.544L23.915%2C32.781z
M26.573%2C35.439l-1.771-1.771l1.771-1.771l-0.886-0.887l0.886-0.886l0.886%2C0.886l-0.886%2C0.887 l1.771%2C1.771L26.573%2C35.439z M31.888%2C28.353l0.886%2C0.886l-3.543%2C3.543l-0.886-0.885L31.888%2C28.353z M30.116%2C35.439l-0.886-0.886 l5.315-5.315l0.886%2C0.886L30.116%2C35.439z M17.715%2C30.124L17.715%2C30.124L17.715%2C30.124L17.715%2C30.124z M19.486%2C17.723v1.771h-1.771 v3.544l5.314-5.315H19.486z%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E");
}
サンプル（１２）
sample12
サンプル（１２）CSSソース
.sample12 {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%2213px%22 height=%2213px%22 viewBox=%220 0 13 13%22%3E %3Cpolygon fill=%22%239BDB83%22 points=%2213%2C12.986 11%2C12.986 11%2C1.986 0%2C1.986 0%2C-0.014 13%2C-0.014 13%2C12.986 %22%2F%3E %3Cpolygon
fill=%22%239BDB83%22 points=%229%2C12.986 7%2C12.986 7%2C5.986 0%2C5.986 0%2C3.986 9%2C3.986 9%2C12.986 %22%2F%3E %3Cpolygon fill=%22%239BDB83%22 points=%225%2C12.986 3%2C12.986 3%2C9.986 0%2C9.986 0%2C7.986 5%2C7.986 5%2C12.986 %22%2F%3E %3C%2Fsvg%3E");
}
サンプル（１３）
sample13
サンプル（１３）CSSソース
.sample13 {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
width=%2222.5px%22 height=%2222.5px%22 viewBox=%220 0 22.5 22.5%22%3E %3Crect x=%22-0.001%22 y=%220.008%22 fill=%22%23A7B7C9%22 width=%2222.5%22 height=%2222.5%22%2F%3E %3Cpath fill=%22%23D2FFFF%22
d=%22M12.562%2C22.51H9.919c-2.035-0.578-3.529-2.445-3.529-4.66v-0.555H5.2v-1.189H4.645 c-2.195%2C0-4.051-1.465-4.648-3.467V9.875C0.593%2C7.874%2C2.45%2C6.408%2C4.645%2C6.408H5.2V5.22h1.19V4.666c0-2.214%2C1.494-4.083%2C3.527-4.66 h2.647c2.033%2C0.577%2C3.527%2C2.446%2C3.527%2C4.66V5.22h1.189v1.188h0.555c2.217%2C0%2C4.086%2C1.495%2C4.664%2C3.526v2.646 c-0.578%2C2.031-2.447%2C3.525-4.664%2C3.525h-0.555v1.189h-1.189v0.555C16.092%2C20.064%2C14.598%2C21.932%2C12.562%2C22.51
M14.982%2C17.85v-1.664 h1.189v-1.189h1.664c2.064%2C0%2C3.742-1.677%2C3.742-3.739S19.9%2C7.518%2C17.836%2C7.518h-1.664V6.33h-1.189V4.666 c0-2.062-1.678-3.74-3.742-3.74c-2.063%2C0-3.742%2C1.678-3.742%2C3.74V6.33H6.31v1.188H4.645c-2.063%2C0-3.741%2C1.677-3.741%2C3.739 s1.678%2C3.739%2C3.741%2C3.739H6.31v1.189h1.189v1.664c0%2C2.061%2C1.678%2C3.738%2C3.742%2C3.738C13.305%2C21.588%2C14.982%2C19.91%2C14.982%2C17.85%22%2F%3E %3C%2Fsvg%3E");
サンプル（１４）
sample14
サンプル（１４）CSSソース
.sample14 {
background: #cdcdcd url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width=%2218px%22 height=%2218px%22 viewBox=%220 0 18 18%22%3E %3Crect x=%2210%22 y=%226%22 fill=%22%23FFFFFF%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%224%22 y=%228%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 y=%2210%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 y=%226%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%228%22 y=%224%22
fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%224%22 y=%224%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%226%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%2214%22 y=%222%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%2216%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%2212%22 fill=%22%23FFFFFF%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%2210%22 y=%222%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 y=%222%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%228%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect y=%2212%22 fill=%22%23FFFFFF%22
width=%222%22 height=%222%22%2F%3E %3Crect y=%2216%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect y=%224%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect y=%228%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%224%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%222%22 fill=%22%23FFFFFF%22
width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%2214%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%2210%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3C%2Fsvg%3E");
サンプル（１５）
sample15
サンプル（１５）CSSソース
.sample15 {
background-image:url(csstest/img3/pattern015.svg);
}
サンプル（１６）
sample16
サンプル（１６）CSSソース
.sample16 {
background-image:url(csstest/img3/pattern015.svg);
background-size:4%;
}
サンプル（１７）
sample17
サンプル（１７）CSSソース
.sample17 {
background-image:url(csstest/img3/pattern016.svg);
}
サンプル（１８）
sample18
サンプル（１８）CSSソース
.sample18 {
background-image:url(csstest/img3/pattern016.svg);
background-size:3%;
}
サンプル（１９）
sample19
サンプル（１９）CSSソース
.sample19 {
background-image:url(csstest/img3/pattern017.svg);
background-size:6%;
}
サンプル（２０）
sample20
サンプル（２０）CSSソース
.sample20 {
background-image:url(csstest/img3/pattern017.svg);
background-size:3%;
}
サンプル（２１）
sample21
サンプル（２１）CSSソース
.sample21 {
background-image:url(csstest/img3/pattern018.svg);
background-size:8%;
}
サンプル（２２）
sample22
サンプル（２２）CSSソース
.sample22 {
background-image:url(csstest/img3/pattern018.svg);
background-size:5%;
}
サンプル（２３）
sample23
サンプル（２３）CSSソース
.sample23 {
background-image:url(csstest/img3/pattern019.svg);
background-size:3%;
}
サンプル（２４）
sample24
サンプル（２４）CSSソース
.sample24 {
background-image:url(csstest/img3/pattern019.svg);
background-size:1.5%;
}
サンプル（２５）
sample25
サンプル（２５）CSSソース
.sample25 {
background-image:url(csstest/img3/pattern020.svg);
background-size:20%;
}
サンプル（２６）
sample26
サンプル（２６）CSSソース
.sample26 {
background-image:url(csstest/img3/pattern020.svg);
background-size:14%;
}
サンプル（２７）
sample27
サンプル（２７）CSSソース
.sample27 {
opacity:0.6;
background-image:url(csstest/img3/pattern020-2.svg);
background-size:18%;
}
サンプル（２８）
sample28
サンプル（２８）CSSソース
.sample28 {
background-image:url(csstest/img3/pattern020-2.svg);
background-size:12%;
}
サンプル（２９）
sample29
サンプル（２９）CSSソース
.sample29 {
background:#cfc url(csstest/img3/pattern020-white.svg);
background-size:12%;
}
サンプル（３０）
sample30
サンプル（３０）CSSソース
.sample30 {
background-image:url(csstest/img3/pattern021.svg);
background-size:6%;
}
サンプル（３１）
sample31
サンプル（３１）CSSソース
.sample31 {
opacity:0.4;
background:#b43 url(csstest/img3/pattern021.svg);
background-size:6%;
}
サンプル（３２）
sample32
サンプル（３２）CSSソース
.sample32 {
opacity:0.2;
background:#000 url(csstest/img3/pattern021.svg);
background-size:6%;
}
サンプル（３３）
sample33
サンプル（３３）CSSソース
.sample33 {
background-image:url(csstest/img3/pattern022.svg);
background-size:5%;
}
サンプル（３４）
sample34
サンプル（３４）CSSソース
.sample34 {
background-image:url(csstest/img3/pattern022.svg);
background-size:3%;
}
サンプル（３５）
sample35
サンプル（３５）CSSソース
.sample35 {
background-image:url(csstest/img3/pattern023.svg);
background-size:4%;
}
サンプル（３６）
sample36
サンプル（３６）CSSソース
.sample36 {
background-image:url(csstest/img3/pattern023.svg);
background-size:3%;
}
サンプル（３７）
sample37
サンプル（３７）CSSソース
.sample37 {
background-image:url(csstest/img3/pattern024.svg);
background-size:4%;
}
サンプル（３８）
sample38
サンプル（３８）CSSソース
.sample38 {
background-image:url(csstest/img3/pattern024.svg);
background-size:3%;
}
サンプル（３９）
sample39
サンプル（３９）CSSソース
.sample40 {
background-image:url(csstest/img3/pattern026.svg);
background-size:7%;
}
サンプル（４０）
sample40
サンプル（４０）CSSソース
.sample40 {
background-image:url(csstest/img3/pattern026.svg);
background-size:5%;
}
サンプル（４１）
sample41
サンプル（４１）CSSソース
.sample41 {
background-image:url(csstest/img3/pattern027.svg);
background-size:5%;
}
サンプル（４２）
sample42
サンプル（４２）CSSソース
.sample42 {
background-image:url(csstest/img3/arrow.svg);
background-size:7%;
}
サンプル（４３）
sample43
サンプル（４３）CSSソース
.sample43 {
background:#cfc url(csstest/img3/arrow.svg);
background-size:4%;
}
サンプル（４４）
sample44
サンプル（４４）CSSソース
.sample44 {
background:#cfc url(csstest/img3/arrow2.svg);
background-size:8%;
}
サンプル（４５）
sample45
サンプル（４５）CSSソース
.sample45 {
background-image:url(csstest/img3/arrow2.svg);
background-size:5%;
}
サンプル（４６）
sample46
サンプル（４６）CSSソース
.sample46 {
background-image:url(csstest/img3/pattern030.svg);
background-size:3%;
}
サンプル（４７）
sample47
サンプル（４７）CSSソース
.sample47 {
background-image:url(csstest/img3/pattern32.svg);
background-size:4%;
}
サンプル（４８）
sample48
サンプル（４８）CSSソース
.sample48 {
background-image:url(csstest/img3/pattern32.svg);
background-size:2%;
}
サンプル（４９）
sample49
サンプル（４９）CSSソース
.sample49 {
background-image:url(csstest/img3/pattern33.svg);
background-size:4%;
}
サンプル（５０）
sample50
サンプル（５０）CSSソース
.sample50 {
background-image:url(csstest/img3/pattern33.svg);
background-size:2%;
}
サンプル（５１）
sample51
サンプル（５１）CSSソース
.sample51 {
background-image:url(csstest/img3/pattern34.svg);
background-size:6%;
}
サンプル（５２）
sample52
サンプル（５２）CSSソース
.sample52 {
background-image:url(csstest/img3/pattern34.svg);
background-size:3%;
}
サンプル（５３）
sample53
サンプル（５３）CSSソース
.sample53 {
background-image:url(csstest/img3/asterisk3.svg);
background-size:4%;
}
サンプル（５４）
sample54
サンプル（５４）CSSソース
.sample54 {
background-image:url(csstest/img3/asterisk3.svg);
background-size:3%;
}
サンプル（５５）
sample55
サンプル（５５）CSSソース
.sample55 {
background-image:url(csstest/img3/asterisk4.svg);
background-size:5%;
}
サンプル（５６）
sample56
サンプル（５６）CSSソース
.sample56 {
background-image:url(csstest/img3/asterisk4.svg);
background-size:4%;
}
サンプル（５７）
sample57
サンプル（５７）CSSソース
.sample57 {
background-image:url(csstest/img3/asterisk5.svg);
background-size:5%;
}
サンプル（５８）
sample58
サンプル（５８）CSSソース
.sample58 {
background-image:url(csstest/img3/asterisk5.svg);
background-size:3%;
}
サンプル（５９）
sample59
サンプル（５９）CSSソース
.sample59 {
background:#adc url(csstest/img3/asterisk4.svg);
background-size:3%;
}
サンプル（６０）
sample60
サンプル（６０）CSSソース
.sample60 {
background:#adc url(csstest/img3/asterisk4.svg);
background-size:2%;
}
サンプル（６１）
sample61
サンプル（６１）CSSソース
.sample61 {
background-image:url(csstest/img3/kaku.svg);
background-size:6%;
}
サンプル（６２）
sample62
サンプル（６２）CSSソース
.sample62 {
background:#ccc url(csstest/img3/kaku.svg);
background-size:6%;
}
サンプル（６３）
sample63
サンプル（６３）CSSソース
.sample63 {
background:#fff url(csstest/img3/pat35x35-gray.svg);
background-size:6%;
}
サンプル（６４）
sample64
サンプル（６４）CSSソース
.sample64 {
background:#fff url(csstest/img3/pat35x35-gray.svg);
background-size:10%;
}
サンプル（６５）
sample65
サンプル（６５）CSSソース
.sample65 {
background:#8f8 url(csstest/img3/pat35x35-white.svg);
background-size:8%;
}
サンプル（６６）
sample66
サンプル（６６）CSSソース
.sample66 {
background:#9df url(csstest/img3/pat35x35-white.svg);
background-size:12%;
}
サンプル（６７）
sample67
サンプル（６７）CSSソース
.sample67 {
background: url(csstest/img3/pat35x35-bgray.svg);
background-size:4%;
}
サンプル（６８）
sample68
サンプル（６８）CSSソース
.sample68 {
background: url(csstest/img3/pat35x35-bgray.svg);
background-size:3%;
}
